javascript - 在 Bootstrap 元素上被跳到新的行,砖石

  显示原文与译文双语对照的内容

这些元素的性质是在高度( 。由于图像和标题) 中,每个元素的性质都不一样,它的高度在应用砌体之前未知。 虽然每个元素的宽度都是固定的。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 css元素 padding: 10px 10 x 0 px ;}

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

所以这里一切都会出错?

时间: 作者:

调试成砖石源代码并找出原因,就是如何准备元素,即被推送到元素的元素应该是一个 HTMLElement 。 一旦我确定了这个问题就消失了。

作者:
...