流体包装布局

Question

我昨天发布了这个，但似乎有一些混乱。所以我再发一遍，这次我会尽量更清楚。

我是这个wordpress主题的忠实粉丝:http://prothemeus.com/demo/litho/，原因如下:

1. 它定位和缩放内容磁贴，使其始终100%填充浏览器窗口
2. 当调整浏览器窗口的大小时，它会重新定位和调整这些磁贴的大小，以便它仍然100%填充浏览器窗口
3. 当调整浏览器窗口的大小时，磁贴的运动是流畅的。瓷砖之间没有缝隙，它有一个非常好的行动。我很喜欢。
4. 瓷砖永远不会小于一定的数量，比如240px宽。一旦它们小于240px，网格就会重新洗牌，以便每行中的瓷砖更少。(很难解释这一点，但玩弄浏览器窗口的大小，希望你会看到我的意思)

这个主题不适合我的事情:

1. 不能显示不同大小的内容磁贴。这对我来说很关键，因为我想把注意力吸引到某些帖子上。具体来说，特色贴文的宽度和高度是普通贴文的两倍。

因此，我通过剥离Litho主题的javascript来定制主题，重命名节点和容器等。并将其全部替换为Packery库，这些库现在定位了我的内容块:

$(document).ready( function() {
    var $container = $('#grid');
    // init
    $container.packery({
        itemSelector: '.grid-item',
         columnWidth: 240,
    });
});

然而，虽然这允许我有不同大小的内容，它现在已经失去了它的流体定位。

Packery是否可以复制Litho主题最初具有的相同效果?

我已经环顾四周，我发现最接近的是这个:

http://codepen.io/desandro/pen/BEJhd

然而，它没有完全相同的运动，它更笨拙，不那么美观。瓦片之间有重叠，或者瓦片之间有缝隙。

我认为不同之处在于瓷砖都是先重新缩放，然后只重新定位一次。而litho主题则会同时重新缩放和重新定位瓷砖，这看起来要好得多。

其次，没有最小大小的瓷砖，当调整浏览器窗口的大小时，他们只会缩小。

(我知道这些操作在不同的浏览器中可能略有不同，但这是我在使用Safari, Firefox和Chrome的Mac上看到的)

所以我的问题是，有没有一种方法，我可以复制Litho主题的重新定位和重新缩放动作，但使用包库?Packery库允许这样做吗?

Thank you

Answer 1

Rsx:基于你的代码依赖和你的评论"你需要调整浏览器窗口的大小最初让它开始工作"，你的问题很简单，javascript是"发射"之前的图像加载。这是Packery的一个常见问题，Metafizzy有自己方便的解决方案。

要实现修复，请下载并安装Metafizzy的imagesLoaded js: https://imagesloaded.desandro.com

你必须小心你如何排序脚本调用在你的html中，这取决于你是想在每个图像加载后调用还是在所有图像加载后。有关更多信息，请参阅Packery网站:https://packery.metafizzy.co/layout.html#imagesloaded

作为一个例子，下面是我的js调用，它在所有图像加载后初始化Packery。

<script type='text/javascript'>
    $('.grid').imagesLoaded( function(){
        $('.grid').packery({
            itemSelector:'.grid-item', // these options should be modified for your layout
            percentPosition:true, // these options should be modified for your layout
            gutter:5 // these options should be modified for your layout
        });
    });
</script>

关于最小尺寸:我不使用这个，但它应该在你的css中设置为min-width和min-height。

Packery可以在所有主流浏览器中以完全相同的方式流畅地工作。反正对我来说也是。

祝你好运!