Javascript 流体封隔器布局

我昨天发布了这个消息，但似乎有些混乱。因此，我再次发布它，并将尝试更清晰的这一次

我是wordpress主题的忠实粉丝：原因如下：

它定位并缩放内容平铺，以始终100%填充浏览器窗口

调整浏览器窗口大小时，它会重新定位和缩放这些平铺，使其仍然100%填充浏览器窗口

调整浏览器窗口大小时，平铺的运动是流动的。瓷砖之间没有缝隙，这是一个非常好的动作。我很喜欢

瓷砖永远不会小于一定量，比如240像素宽。一旦它们小于240px，网格将重新排列瓷砖，以便每行中的瓷砖更少。（很难解释这一点，但通过调整浏览器窗口的大小，希望您能理解我的意思）

关于这个主题，我觉得不合适的地方是：

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

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

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

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

有没有一种方法，派克可以复制同样的效果，原来的岩性主题

我环顾四周，发现最接近的是：

然而，它并没有完全相同的运动，它更笨重，也不美观。瓷砖之间存在重叠，或瓷砖之间形成间隙

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

其次，平铺没有最小尺寸，调整浏览器窗口大小时，平铺只会缩小

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

所以我的问题是，有没有一种方法可以复制Litho主题的重新定位和重新缩放操作，但使用Packy库？派克图书馆允许这样做吗

---

谢谢你

Rsx：根据你的代码笔和你的评论“你需要先调整浏览器窗口的大小，让它开始工作”，你的问题只是javascript在加载图像之前“启动”。这是Packer的一个常见问题，Metafizzy有自己方便的解决方案

要实现修复，请下载并安装Metafizzy的imagesLoaded js：

您必须注意如何在html中对脚本调用进行排序，这取决于您是希望在加载每个图像后调用，还是在加载所有图像后调用。有关更多信息，请参阅Packery网站：

作为一个例子，这里是我的js调用，它在加载所有图像后初始化Packer

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

$（'.grid'）.imagesLoaded（函数（）{
$（'.grid'）.packer({
itemSelector:“.grid item”，//这些选项应根据您的布局进行修改
percentPosition:true，//这些选项应该针对您的布局进行修改
檐槽：5//这些选项应根据您的布局进行修改
});
});

关于最小尺寸：我不使用这个，但它应该可以在css中设置为

minwidth

和

minheight

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

---

祝你好运

Rsx：根据您的代码笔和您的评论“您需要首先调整浏览器窗口的大小，使其开始工作”，您的问题只是javascript在加载图像之前“启动”。这是Packer的一个常见问题，Metafizzy有自己方便的解决方案

要实现修复，请下载并安装Metafizzy的imagesLoaded js：

您必须注意如何在html中对脚本调用进行排序，这取决于您是希望在加载每个图像后调用，还是在加载所有图像后调用。有关更多信息，请参阅Packery网站：

作为一个例子，这里是我的js调用，它在加载所有图像后初始化Packer

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

$（'.grid'）.imagesLoaded（函数（）{
$（'.grid'）.packer({
itemSelector:“.grid item”，//这些选项应根据您的布局进行修改
percentPosition:true，//这些选项应该针对您的布局进行修改
檐槽：5//这些选项应根据您的布局进行修改
});
});

关于最小尺寸：我不使用这个，但它应该可以在css中设置为

minwidth

和

minheight

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

---

祝你好运

你把这件事搞混了。它们不一样。您不能同时使用同位素和封隔器布局库，但可以使用同位素的封隔器布局模式。是的，这是正确的。今天我把所有东西都换成了派克，所以我不再使用同位素了。将更新问题…谢谢，@Macsupport我现在已经更新了问题。@Macsupport这是我目前的位置。您需要首先调整浏览器窗口的大小，以使其开始工作。您对问题感到困惑。它们不一样。您不能同时使用同位素和封隔器布局库，但可以使用同位素的封隔器布局模式。是的，这是正确的。今天我把所有东西都换成了派克，所以我不再使用同位素了。将更新问题…谢谢，@Macsupport我现在已经更新了问题。@Macsupport