0

嘿，这是我正在工作的网站http://trevormsmith.com/linx/art.html

尝试构建过滤系统（在页脚中），当您单击特定类别（极简主义、印刷、抽象）时，砖石会将图像重置为单列，而不是网格。如果您调整浏览器的大小，它将重新调整为正常。

这就是我对带有图像的容器所说的砌体

此外，当我将#minimalist、#typographic、#abstract 设置为 display:show 而不是 display:none （它必须是）时，布局很好并且运行顺畅。

有什么建议么？

编辑：所以这里的代码只适用于#minimalist，除了砖石没有被触发并且图像保持浮动而不是平铺：

EditEdit：这是当前代码，#containers 淡入为单列而不是网格布局：http: //jsfiddle.net/T6SDb/1/

调用砌体：

$( function() {

$('#container-all, #minimalist, #typographic, #abstract').masonry({
    itemSelector: '.item, .item-m, .item-t, .item-a',
    columnWidth: 7 }); });

然后是过滤器的淡入/淡出：

$('#btn-all').click(function(e){    
$('#minimalist, #typographic').fadeOut('slow', function(){
    $('#container-all').delay(1000).fadeIn('slow', function(){
    });
});});
$('#btn-m').click(function(e){    
$('#container-all, #typographic').fadeOut('slow', function(){
    $('#minimalist').delay(1000).fadeIn('slow', function(){
        $('#container-all').masonry('layout');
    });
}); });
$('#btn-t').click(function(e){    
$('#container-all, #minimalist').fadeOut('slow', function(){
    $('#typographic').delay(2000).fadeIn('slow', function(){
        $('#container-all').masonry('layout');
    });
}); });
$('#btn-a').click(function(e){    
$('#container-all, #typographic, #minimalist').fadeOut('slow', function(){
    $('#abstract').delay(2000).fadeIn('slow', function(){
        $('#container-all').masonry('layout');
    });
}); });
4

1 回答 1

1

淡入所选图像后尝试调用 masonary('layout') ，即对于 container-all （来自您的 filter.js 文件）试试这个：

$('#btn-all').click(function(e){    
    $('#minimalist, #typographic').fadeOut('slow', function(){
        $('#container-all').delay(1000).fadeIn('slow', function(){
            $('#container-all').masonry('layout');
        });
    });
});

我只是从 JavaScript 控制台测试这个，所以你可能需要调整时间/定位。我在淡入淡出完成时这样做，您可能想在淡入淡出开始后尝试这样做。

编辑

这可能是因为你的容器放在一起的方式以及你如何开始砌体，也许你可以在你的主要来源中这样做：

var mason;
$( function() {
    mason = $('#container-all, #minimalist, #typographic, #abstract').masonry({
            itemSelector: '.item, .item-m, .item-t, .item-a',
            columnWidth: 7});
        });
});

然后稍后您可以mason.masonary('layout')在每个点击功能中使用，而不是引用单个容器，即第一次尝试：

$('#btn-all').click(function(e){    
    $('#minimalist, #typographic').fadeOut('slow', function(){
        $('#container-all').delay(1000).fadeIn('slow', function(){
             mason.masonary('layout');
        });
    });
});

根据您希望事物出现和重新排列的时间，您可能想要淡入淡出某个值，然后进行布局，然后完成淡入淡出（或者您也可以延迟执行此操作）。

也许看看 Masonary 功能hide并reveal删除给定的元素。

它还可能使使用物品本身而不是容器更容易（因为所有东西都被重新排列）并且只有一个外部容器可以容纳所有东西。

我还建议尝试一个更简单的示例（也许只是彩色div的 s 或其他东西），使用它，如果您仍然有问题，请发布它。您正在使用的库之间可能存在一些交互。

编辑 2

添加了Fiddle，它使用mason上面的单独变量。它可以工作，但同样，您可能需要对淡入/淡出的时间做一些事情——当然，在它们可见之前您不能安排这些东西，这是一个问题。我不确定解决这个问题的最佳方法。

于 2013-09-03T04:38:27.510 回答