1

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

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

  1. 它定位和缩放内容图块以始终 100% 填充浏览器窗口
  2. 在调整浏览器窗口大小时，它会重新定位和重新缩放这些图块，以便它仍然 100% 填充浏览器窗口
  3. 调整浏览器窗口大小时，图块的运动是流畅的。瓷砖之间没有间隙，它对这一切都有很好的作用。我喜欢的。
  4. 瓷砖永远不会小于一定数量，比如 240 像素宽。一旦它们小于 240 像素，网格就会重新排列图块，以便每行中的图块更少。（很难解释这一点，但请使用浏览器窗口的大小，希望您能明白我的意思）

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

  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

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

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

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

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

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

谢谢

4

1 回答 1

0

Rsx：根据您的 codepen 和您的评论“您最初需要调整浏览器窗口的大小以使其开始工作”，您的问题只是 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 可以在所有主流浏览器中以完全相同的方式流畅地工作。无论如何，它对我有用。

祝你好运！

于 2017-12-13T11:37:42.223 回答