小编J-S*_*-Si的帖子

我需要每页有多个砌体网格。我使用 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,
  });
});

这是问题的代码笔： …