我需要每页有多个砌体网格。我使用 wordpress 循环生成代码,因此每个 div 容器都具有相同的类名。
有没有办法在所有同名的 div 容器上调用 Masonry?
html
<!--Masonry 1-->
<div class="print-slider">
<div class="print-slider-sizer"></div>
<div class="gutter-sizer"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
</div>
<!--Masonry 2-->
<div class="print-slider">
<div class="print-slider-sizer"></div>
<div class="gutter-sizer"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
</div>
JS
var grid = document.querySelector('.print-slider');
var msnry;
imagesLoaded( grid, function() {
// init Isotope after all images have loaded
msnry = new Masonry( grid, {
itemSelector: '.print-slider-item',
columnWidth: '.print-slider-sizer',
gutter: '.gutter-sizer',
percentPosition: true,
});
});
这是解决该问题的代码笔:
http://codepen.io/anon/pen/OXBrPb http://codepen.io/anon/pen/OXBrPb
感谢您的帮助!
With document.querySelector('.print-slider')
你只会得到第一个具有以下内容的 html 元素print-slider
班级。这就是为什么只初始化第一个砌体。
下面是您的代码,为了捕捉所有内容进行了一些调整.print-slider
元素并分别初始化砌体。不同之处在于,我通过类名获取元素,然后循环遍历它们。我用了body
作为选择器imagesLoaded
因为我没有完整的 html 结构。我建议您将砌体包装在一个 div 中,并使用该 div 来检查图像是否已加载。或者,更好的是,在 foreach 内部进行初始化之前,分别对每个砌体进行检查。
var elements = document.getElementsByClassName('print-slider');
var msnry;
imagesLoaded( document.querySelector('body'), function() {
// init Isotope after all images have loaded
var n = elements.length;
for(var i = 0; i < n; i++){
msnry = new Masonry( elements[i], {
itemSelector: '.print-slider-item',
columnWidth: '.print-slider-sizer',
gutter: '.gutter-sizer',
percentPosition: true,
});
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)