iDevArtem

pjax -> demo

var margin = 15;  // 15px отступ для наглядности

$('.container').on('resize scroll', function() {

  var $container = $(this);
  var container_height = $container.outerHeight();

  $('.block').each(function(i, block) {
    var $block = $(block);
    
    var top = $block.offset().top - $container.offset().top;
    var bottom = top + $block.outerHeight();

    var is_visible = (bottom > (0 + margin) && top < (container_height - margin));

    $block[is_visible ? 'addClass' : 'removeClass']('block-visible');
  });
}).trigger('scroll');

.block-visible { background-color: red; }

P.S.: может есть лучше решение =/

быстрый способ:
scripts.js -> $.fn.bmdIframe -> $(settings.classBtn).on('click', function(e) { ... });
вместо click нужно написать touchstart

правильный способ:

$('#modal-iframe').on('show.bs.modal', function(e) {
    var button = $(e.relatedTarget);
    var allowFullscreen = button.data('bmdVideoFullscreen') || false;

    var dataVideo = {
        src: button.data('bmdSrc'),
        height: button.data('bmdHeight') || 100,
        width: button.data('bmdWidth') || 500
    };

    if ( allowFullscreen ) dataVideo.allowfullscreen = "";

    // stampiamo i nostri dati nell'iframe
    $(this).find("iframe").attr(dataVideo);
}).on('hidden.bs.modal', function(){
    $(this).find('iframe').html("").attr("src", "");
});

по-моему, по умолчанию, порядок идет слева направо (то есть как вам и нужно).
1, 2 и 3 блоки будут прижаты к верху страницы (начальная позиция).
4-й же блок будет под самым меньшим по высоте блоком, 5-й - под следующим по высоте и т.д.

если высота 1-го блока 200px, 2-го - 100px, 3-го - 150px... то 4-й блок будет под 2-м блоком, 5-й под 3-м и т.д.

Чистый JavaScript -> GlideJS
jQuery -> OwlCarousel2
jQuery + Bootstrap -> Carousel

Есть решение для webkit: jsfiddle.net

О подобных проблемах JavaScript'а есть статейка на хабре

Как вариант, вашу проблему можно решить округлением:

var result = (2.68-0.01).toFixed(2)
console.log('result = ' + result); // result = 2.67