Каменная кладка на элементах бутстрапа наткнулась на новую строку

Question

Характер элементов в том, что каждый из них будет меняться по высоте (из-за изображения и названия), а его высота неизвестна перед применением кладки. Хотя ширина каждого элемента фиксируется с .col-lg-3.

На странице рендеринга, где каждая строка имеет 4 элемента, элемент 5 визуально находится в строке самостоятельно, а 6, 7, 8 попадает в третью строку.

HTML код

<div class="section-details"> 
    <div class="container"> 
    <div class=""> 
     <div class="masonry" id="elements" data-reference="0"> 
     <!-- elements will be pulled over dynamically --> 
     </div> 
    </div> 
    </div> 
</div> 

и содержание каждого нового элемента заворачивают в чем-то вроде следующего

<div class="col-lg-3 element"> 
</div> 

CSS .element { обивка: 10px 10px 0px; }

Javascript код

// layout the elements 
var layout = function(elements, $container, selector) { 
    $container.imagesLoaded(function() { 
    $container.masonry({ 
     itemSelector: selector, 
     columnWidth: selector, 
     isAnimated: true, 
     animationOptions: { 
     duration: 750, 
     easing: 'linear', 
     queue: false 
     } 
    }).append(elements).masonry('appended', elements, true); 
    }); 
}; 

и это был призван следующим образом

layout(elements, $('#elements'), '.element'); 

Так что что-то может пойти не так здесь?

Answer 1

Отладка в исходный код кладки и выяснение причины, это то, как элементы были подготовлены, что имеет значение - каждый элемент, который попал в массив элементов, должен быть элементом HTMLElement. И как только я понял это, проблема исчезла.