Question

我正在创建一个类似于“ isotope.js”的脚本。

我正在使用“ masonry.js”来排列对象（在本例中为图像）。

我已经编写了一个脚本，其工作原理基本上是这样的：当按下多个按钮之一时，仅显示具有相关类的图像，而所有其他没有该类的图像都将消失（“ .hide”）。

还有一个“全部”按钮，按下该按钮可将所有图像重新带回。

当其他图像消失时，它们在“网格”中留下空白点。我进行了设置，以便砌石再次运行以将其余图像“重新打包”成网格。问题是，当您按下“全部”按钮后，我希望它返回所有图像的初始布局，并且顺序相同。我似乎无法做到这一点。

HTML：

<div class="btn-group">
 <button type="button" class="btn btn-default 1" data-button-type="all">all</button>
 <button type="button" class="btn btn-default 1" data-button-type="interior">1</button>
 <button type="button" class="btn btn-default 2" data-button-type="commercial">2</button>
 <button type="button" class="btn btn-default 3" data-button-type="residental">3</button>
</div>
<div class="bloc bgc-white l-bloc" id="bloc-1">
 <div class="col-sm-12">
  <h2 class="text-center mg-md">Gallery</h2>
 </div>
 <div class="row voffset">
  <div class="grid-item grid-item-double-height interior">
   <a href="#">
    <img src="img/lazyload-ph.png" data-src="img/slurp-004.jpg" class="img-responsive lazyload"/>
   </a>
  </div>
  <div class="grid-item grid-item-double-height commercial">
   <a href="#">
    <img src="img/lazyload-ph.png" data-src="img/retail-zenith.jpg" class="img-responsive lazyload"/>
   </a>
  </div>
  <div class="grid-item residental">
   <a href="#">
    <img src="img/lazyload-ph.png" data-src="img/retail-watch-shop.jpg" class="img-responsive lazyload"/>
   </a>
  </div>
  <div class="grid-item grid-item-double-height interior">
   <a href="#">
    <img src="img/lazyload-ph.png" data-src="img/retail-tony-guy-subiaco.jpg" class="img-responsive lazyload"/>
   </a>
  </div>

JS：

$('.grid').masonry({
 // options
 itemSelector: '.grid-item',
 columnWidth: 264,
 gutter: 10
});

(".btn-group").on('click', 'button', function(e) {
 var push = $(this).data("button-type");
 if (push === "all") {
  $(".grid-item").show();
 } else if (push === "interior") {
  $(".grid-item").hide();
  $(".interior").show();
  $('.grid').masonry({
   // options
   itemSelector: '.grid-item',
   columnWidth: 264,
   gutter: 10
  });
 } else if (push === "commercial") {
  $(".grid-item").hide();
  $(".commercial").show();
 } else if (push === "residental") {
  $(".grid-item").hide();
  $(".residental").show();
 }
});

我希望（希望）具有此功能，因此无论显示多少图像（全部为1，20张），图像都将重新格式化其布局以将它们全部打包（使用砖石结构）。

如何在按钮上重新实现manonry.js？

0 个答案: