Javascript 如何使用相同的类名在每页上多次使用砌体？

我需要有多个砌体网格每页。我使用wordpress循环生成代码，因此每个div容器都有相同的类名

有没有一种方法可以在所有同名的div容器上调用砌体

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>

以下是解决此问题的代码笔：

---

谢谢你的帮助

使用

document.querySelector（'.print slider'）

只能获得第一个具有

print slider

类的html元素。这就是为什么只初始化第一个砌体

下面是您的代码，为了捕捉所有

。分别打印滑块
元素和初始化masonries。不同之处在于，我按类名获取元素，然后循环遍历它们。我使用
body
作为
imagesLoaded
的选择器，因为我没有完整的html结构。我建议您将masonries包装在一个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,
    });
  }
});

var elements=document.getElementsByClassName（'print-slider'）；
var-msnry；
imagesLoaded（document.querySelector（'body'）、function（）{
//加载所有图像后初始化同位素
var n=元素长度；
对于（变量i=0；i
我很高兴这有帮助：）
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,
    });
  }
});