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

Automatically collapsing vertical spacing between posts in grid theme

本文关键字：之间 网格 折叠 垂直      更新时间：2023-09-26

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

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

是否有一个名称的技术，是用来使帖子安排自己在第一个示例站点?我至少在找一个我可以在谷歌上搜索的术语来学习如何做到这一点……但更好的是一个代码示例，它将展示如何使网格以这种方式自动排列。

谢谢!

这被称为动态网格或者可能是类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/

这些都可以。

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

书签和BlocksIt有类似的配置选项。它们允许您指定容器宽度，然后是块宽度。在它和偏移(块之间的距离)之间，你可以把它安排成你最终有3列相同的宽度。

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

这里的主要部分是让这些插件中的一个设置和工作。一旦设置好了，您只需要根据自己的喜好调整CSS即可。每个插件都提供了工作示例以及代码示例和文档。砌体的一个简单实现是这样的:

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 post的宽度为300px，四周的边距为10px。你最终会得到3列，每列之间的边距为10px。

列出的每个插件都以这样一种方式获得许可，即免费用于个人/商业用途(参见每个插件各自的许可)，所以不用担心。

相关文章：