9

我隐藏了一个 li，隐藏它之后，html 中留下了一个空白，我想重新加载砌体并重新排列内容。我试过 .masonry('reload') 但我没有工作。任何帮助

小提琴 http://jsfiddle.net/emtBX/1/

JS

$(document).ready(function(){
              $('#container').masonry({
                // options
                itemSelector : '.item',
                columnWidth : 240,

                isAnimated: true,
                  animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                  }
              });

              $('#butn1').click(function() {

                    $('#container ul li').eq(2).hide();
                    $('#container').masonry('reload');

              });
            });
4

3 回答 3

9

您可以隐藏 li 元素并删除 .item 类以重新排序元素，http://jsfiddle.net/emtBX/11/

$('#container ul li').eq(2)
    .css({'visibility': 'hidden', 'display': 'none'})
    .removeClass("item masonry-brick");
于 2012-08-23T07:56:06.793 回答
4

要回答刘易斯评论并为在 v3 中寻找解决方案的人提供答案，在 v3 中隐藏方法不再存在，您只需使用 jquery 的 hide() 方法并在触发砌体布局后。所以想法是隐藏元素：

$('.something-to-hide').each(function(){
   $(this).hide();
});
$('.grid').masonry('layout'); //we assume grid is your class use to masonry container.

然后显示隐藏的元素：

$('.class-for-all-elements').show()
$('.grid').masonry('layout');

就我而言，我在隐藏之前添加了一些搜索，这就是我使用 each() 函数的原因。

斯蒂芬妮

于 2018-02-06T13:22:55.320 回答
3

jquery masonry 本身有一个名为“hide”的方法（http://masonry.desandro.com/methods.html#hide）

像这样使用它：

$('#container').masonry( 'hide', $('#container ul li').eq(2) ).masonry();

最后一个 masonry() 调用做你想做的事：“重新加载”瓷砖

于 2013-06-12T13:42:00.657 回答