流体包装布局

Fluid Packery Layout

本文关键字:布局 包装      更新时间:2023-09-26

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

我是这个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

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-widthmin-height

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

祝你好运!