如何在elkaniho.com/获得CSS布局

Question

这个网站http://www.elkaniho.com/有一个CSS布局，这就是我想要的，你看，divs堆叠在一起，不是在精确的网格上，而是在底部和侧面。

当你重新调整浏览器大小时，它们都会完全重新调整？

任何人都知道如何在elkaniho.com上获得相同的布局或者这种布局是什么类型的布局？

Answer 1

还有一个名为Masonry的简洁jQuery插件可以处理不同宽度的div并尽可能紧密地堆叠它们。取决于您的内容。

Answer 2

这只是一个六列布局。轻松完成6个div：

<div id="container">
  <div class="column">one</div>
  ...
  <div class="column">six</div>
</div>

作为流畅的布局：

#container { overflow: auto; }
div.column { width: 16%; float: left; }

您当然可以修正宽度。

然后每列都有几个div来执行div（实际上是任何块元素）：它们从上到下堆叠。

Answer 3

您所说的效果是使用javascript创建的。如果查看源代码，您将找到一个名为funciones.js的javascript文件的链接，其中包含负责此效果的cajas和cajasInterior函数。另请注意，他们正在使用jQuery。

功能：

1. 根据体宽，框宽和边距
计算出最大列数
2. 使用box类和boxInterior设置所有div以具有绝对位置并设置其宽度
3. 浏览每个方框并计算左侧和顶部位置。

我会联系该网站的网站管理员并请求使用此脚本的权限并根据您的需要进行更改。