Question

昨天我发布了这个，但似乎有些混乱。所以我再次发布它，并且这次会更加清楚。

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

它定位并缩放内容图块以始终填充浏览器窗口100％
调整浏览器窗口大小时，重新定位并重新缩放这些图块，使其仍然填充浏览器窗口100％
在调整浏览器窗口大小时，瓷砖的运动是流动的。瓷砖之间没有间隙，它有一个非常好的动作。我喜欢哪一个。
瓷砖永远不会小于一定数量，比如240px宽。一旦它们小于240px，网格就会重新调整切片，以便每行中的切片更少。（很难解释这一点，但玩浏览器窗口的大小，希望你会看到我的意思）

关于这个主题对我不起作用的事情：

无法显示不同大小的内容图块。这对我来说很关键，因为我想提请注意某些帖子。具体而言，特色贴瓷砖的宽度和高度是普通贴瓷砖的两倍。

因此，我通过剥离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

然而，它没有完全相同的动作，它更笨重，而不是美学上令人愉悦。瓷砖之间存在重叠，或瓷砖之间形成间隙。

我认为区别在于瓷砖首先重新调整，然后只重新定位一次。而光刻主题，将同时重新缩放和重新定位瓷砖，这看起来更好。

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

（据我所知，这些操作在不同的浏览器中可能略有不同，但这是我在Mac上使用Safari，Firefox和Chrome看到的内容）

所以我的问题是，有没有办法可以复制Litho主题的重新定位和重新缩放操作，但是使用Packery库？ Packery库是否允许这样做？

谢谢

Answer 1

Rsx：根据您的codepen和您的评论＆＃34;您需要最初调整浏览器窗口的大小以使其开始工作＆＃34;，您的问题只是javascript是＆＃34;触发＆＃34;在图像加载之前。这是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可以在所有主流浏览器中以完全相同的方式流畅地工作。无论如何它确实适合我。

最好的运气！

流体包装布局

1 个答案: