如何使用相同的类名每页多次使用Masonry？ [英] How can I use Masonry multiple times per page with the same class name?

问题描述

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

I need to have multiple Masonry grids per page. I'm generating the code with a wordpress loop, so every div container has the same class name.

有没有办法在所有div容器上调用Masonry姓名？

Is there a way to call Masonry on all div containers with the same name?

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

感谢您的帮助！

推荐答案

使用 document.querySelector （'。print-slider'）您只获得第一个包含 print-slider 类的html元素。这就是为什么只有第一块砖石被初始化的原因。

With document.querySelector('.print-slider') you only get the first html element that has the print-slider class. That's why only the first masonry is initialized.

下面是你的代码调整了一下，以便捕获所有 .print-slider 元素并分别启动砌体。不同之处在于我按类名获取元素，然后循环遍历它们。我使用 body 作为 imagesLoaded 的选择器，因为我没有整个html结构。我建议你将砌体包裹在一个div中并使用那个来检查图像是否已加载。或者，更好的是，在foreach内部进行初始化之前，分别检查每个砌体。

Below is your code adjusted a bit in order to catch all .print-slider elements and init the masonries respectively. The difference is that I get the elements by class name and then loop through them. I used body as the selector for the imagesLoaded because I didn't have the whole html structure. I would suggest that you wrap the masonries in one div and use that one for checking whether the images are loaded. Or, even better, do the check for each masonry separately, before doing the initialization inside the 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,
    });
  }
});

这篇关于如何使用相同的类名每页多次使用Masonry？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！