Question

当使用perfectMasonry扩展调整同位素中的元素大小时，因为元素的大小可变，它会创建一些空格。如果创建了一个空白空间，每次有重新布局时我想用jquery检查。如果它已创建，我想插入一个新元素，其间隙大小是在其他元素之间创建的，以填充空间。

我尝试在容器的父div和一些css阴影框上使用背景，使它看起来不错，但没有成功。我正在处理的代码 http://jsfiddle.net/TqVSs/ （无法从github链接到perfectMasonry源码，因此superMasonry在javascript box上。向下滚动以查找我的代码）

$('#container').isotope({
layoutMode: "perfectMasonry",
perfectMasonry: {
        columnWidth: 0,
        rowHeight: 125
}
})            



 $('#container').delegate( '.element', 'click', function(){
        if($(this).hasClass("dummy")==false){
            $(this).toggleClass('large');   
            $('#container').isotope('reLayout');
        }
    });

Answer 1

使用Packery！

Packery布局旨在填补空白。 Packery也有great support for variable sizes。

Answer 2

我在使用settimeout函数点击事件后重新排序。解决方案在

之下

  setTimeout(function(){
            $srid = $('.sonCalismalar .isler').packery({
                layoutMode: 'packery',
                itemSelector: '.element-item'
            });
            console.log("ok");
        },500);

完整代码位于

之下

        $('.sonCalismalar nav').on('click', 'a', function () {
        var filterValue = $(this).attr('data-filter');
        // use filterFn if matches value
        // filterValue = filterFns[filterValue] || filterValue;
        $grid.isotope({ filter: filterValue });

        //şimdi aktif 3. elementlerin margin rigth ını 0 yap
        //.urunler .element-item .ucunculer { margin-right: 0px; }        
        setTimeout(function(){
            $srid = $('.sonCalismalar .isler').packery({
                layoutMode: 'packery',
                itemSelector: '.element-item'
            });
            console.log("ok");
        },500); 

    });

如何发现和填充同位素jquery网格中元素之间的空白区域？

2 个答案: