如何在每个页面上使用相同的 class 名称多次使用 Masonry？

Question

我需要每页有多个 Masonry 网格。我用 wordpress 循环生成代码，所以每个 div 容器都有相同的 class 名称。

有没有办法在所有 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

感谢您的帮助！

Answer 1

使用 document.querySelector('.print-slider') 时，您只会获得具有 print-slider class 的第一个 html 元素。这就是为什么只有第一个砌体被初始化。

下面是您的代码稍作调整，以捕获所有 .print-slider 元素并分别初始化砌体。区别在于我通过 class 名称获取元素，然后循环遍历它们。我使用 body 作为 imagesLoaded 的选择器，因为我没有完整的 html 结构。我建议您将砌体包裹在一个 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,
    });
  }
});

如何在每个页面上使用相同的 class 名称多次使用 Masonry？

How can I use Masonry multiple times per page with the same class name?

javascript

jquery

wordpress

jquery-masonry