使用jquery masonry隐藏元素后重新组织所有元素

时间:2012-08-23 07:39:38

标签: jquery

我隐藏了一个李,在隐藏它之后,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');

              });
            });

3 个答案:

答案 0 :(得分:8)

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

$('#container ul li').eq(2)
    .css({'visibility': 'hidden', 'display': 'none'})
    .removeClass("item masonry-brick");

答案 1 :(得分:3)

jquery masonry本身有一个名为“hide”(http://masonry.desandro.com/methods.html#hide

的方法

像这样使用它:

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

最后一次masonry()调用会做你想要的:“重新加载”tile

答案 2 :(得分:3)

要回答Lewis注释并为在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()函数的原因。

斯特凡