Question

元素的性质是每个元素的高度不同（由于图像和标题），并且在应用砖石之前它的高度是未知的。虽然每个元素的宽度用.col-lg-3固定。

在每个行有4个元素的渲染页面上，5个元素在视觉上在一行上，6,7,8被推到第3行。

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。一旦我解决了问题，问题就消失了。

bootstrap元素上的砌体被撞到新行

1 个答案: