Question

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

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

这就是我用图像

对容器进行砌筑的问题

另外，当我将#minimalist，#typographic，＃abstract设置为display：show而不是display：none（它需要）时，布局很好并且工作顺利。

有什么建议吗？

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

EditEdit：这是当前代码，＃content作为单列而不是网格布局淡入：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');
    });
}); });

Answer 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或其他东西），使用它，如果你还有问题就发布它。您正在使用的库之间可能存在一些交互。

修改2

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

选择链接时，masonry.js div重置

1 个答案: