Javascript bootstrap元素上的砌石被撞到了新行

元素的性质是，由于图像和标题，每个元素的高度都会有所不同，在应用砌体之前，其高度是未知的。虽然每个元素的宽度是用.col-lg-3固定的

在呈现的页面上，每行有4个元素，5元素在视觉上独立于一行，6、7、8被向下推到第3行

html代码

它的调用方式如下

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

---

所以这里可能会出什么问题？

调试到砌体源代码中并找出原因，重要的是元素是如何准备的-推送到元素数组的每个元素都应该是一个HtmleElement。一旦我解决了这个问题，问题就消失了。

为什么“itemSelector，columnWidth”都是选择器？很好，我在调试问题时添加了这一行，但忘了删除它。删除该选项后仍然是相同的行为：JSFIDLE或链接将有助于调试到砌体源代码中并找出原因，重要的是元素的准备方式——推送到元素数组的每个元素都应该是HtmleElement。

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

// 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');