javascript - 自动折叠网格主题中帖子之间的垂直间距

Question

我正在尝试为我的 wordpress 网站制作一个基于网格的自定义主题。我想做的一件事是让同一列中的帖子之间的垂直间距自动折叠，这样即使帖子的高度不同，它们之间也没有空白空间。

例如，在 this site 上网格正在按我想要的方式折叠。然而，关于 this site ，帖子按水平对齐的行排列，每行之间有空格。

在第一个示例站点中，是否有用于使帖子自行排列的技术的名称？我至少正在寻找一个术语，我可以通过谷歌搜索来学习如何做......但更好的是一个代码示例，它会展示如何制作一个以这种方式自动排列的网格。

谢谢!

Answer 1

这被称为动态网格，或者可能是类似 Pinterest 的网格。它由 Pinterest 推广.

本质上，您不能单独使用 CSS 和 HTML 来完成此操作。这种类型的网格需要使用一些 Javascript 或服务器端处理来处理。我建议使用 Javascript 并检查许多 jQuery 插件中的一个，它们完全可以满足您的需求(请注意，您链接到的第一个网站使用插件进行布局):

• > http://masonry.desandro.com/ (您链接到的第一个网站使用的是什么)
• > http://www.wookmark.com/jquery-plugin
• > http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/
• > http://yconst.com/web/freetile/

其中任何一个都可以解决问题。

Masonry 让您使用 CSS 设置容器宽度和 block 之间的间距。您可以在 Javascript 中指定所需的列宽。 block 宽度和间距的计算将决定容器中有多少列。

Wookmark 和 BlocksIt 具有相似的配置选项。它们让您指定容器宽度，然后指定 block 宽度。在那个和偏移量之间 ( block 之间的距离) 你可以这样安排它，这样你最终得到 3 列相同的宽度。

开箱即用的

Freetile 不支持等宽列(它的一个特性)，但是您可以用一点点完成同样的事情CSS 和/或直接修改插件。

此处的主要部分是设置并运行这些插件之一。一旦准备就绪，您只需根据自己的喜好调整 CSS。这些插件中的每一个都提供了工作示例以及代码示例和文档。 Masonry 的简单实现如下所示:

HTML:

<div id="grid-container">
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
</div>

CSS:

#grid-container {
    width: 940px; //width of your container
}
.post {
    margin: 10px; //spacing between each block/post
}

Javascript:

$('#grid-container').masonry({
    itemSelector: '.post', //selector for each block
    columnWidth: 300       //width of your columns
});

每个区 block 帖子的宽度为 300px，四周的边距为 10px。您最终会得到 3 列，每列之间有 10px 的边距。

列出的每个插件都以个人/商业免费使用的方式获得许可(查看每个插件各自的许可)，所以不用担心。