如何在点击时触发/重新加载Masonry插件 [英] how to trigger/reload Masonry plugin on click

问题描述

因为我使用的标签不同，所以砌筑不会加载隐藏的项目，因此，当我单击新的标签时，图像会相互堆叠，我知道此问题已被问过并通过点击该标签来回答砌筑，

当前用

<$ p $呼叫砌体p> $（function（）{
$（'＃container'）。masonry（{
// options
itemSelector：'.item'，
columnWidth：260
}）;
}）;`
$（window）.load（function（）{$（'＃container'）。masonry（）;}）;


和选项卡2相同，但ID不同-＃container2

第一个选项卡可以正常工作，但第二个选项卡可以堆叠图像，直到调整浏览器大小并修复该浏览器并正常运行为止

解决方案

这样做：

  $（function（）{
 $（'＃container'）。masonry（{
 //选项
 itemSelector：'.item'，
 columnWidth：260 
}）; 
 }）; 
 
 var masonryUpdate = function（）{
 setTimeout（function（）{
 $（’＃container’）。masonry（）; 
}，500）; 
} 
 $（document）.on（'click'，masonryUpdate）; 
 $（document）.ajaxComplete（masonryUpdate）; 
  

再也不用担心！或者，您也可以在其他动画之后再次调用它，例如：

  $（'＃something'）。slideDown（600，masonryUpdate ）; 
  

即使您不这样做，也只需单击页面中的任意位置，砖石就会更新。

Because i have different tabs, masonry is not loading the hidden items, so when i click on a new tab the images stack onto each other, i know this question has been asked before and answered with trigger masonry by clicking the tab, but how would i go about doing this without messing up the first tab.

Currently calling masonry with

$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 260
   });
});`
$(window).load(function(){   $('#container').masonry(); });

and the same for tab 2 but with a different ID - #container2

the tab one works perfectly but tab two stacks the images, until you resize the browser which fixes it and works as normal

解决方案

Do it like this:

$(function(){
    $('#container').masonry({
        // options
        itemSelector : '.item',
        columnWidth : 260
   });
});

var masonryUpdate = function() {
    setTimeout(function() {
        $('#container').masonry();
    }, 500);
}
$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);

Never worry about it again! Or, you may call it again after other animations, like:

$('#something').slideDown(600, masonryUpdate);

Even if you don't, just click anywhere in the page and masonry will update.

这篇关于如何在点击时触发/重新加载Masonry插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！