javascript - 强制瓷砖占用所有可用空间

Question

我正在为一个网站开发一个新闻部分，该部分由网格中的图 block 组成，每个图 block 都是一条新闻。我正在尝试制作类似于 Windows 8 开始菜单的东西，但具有可变高度的图 block 。瓷砖有四种尺寸:1x1、1x2、2x1 和 2x2。

网格的每一行将有 5 个方 block 的空间，如果它们是 1x1(例如，您可以放置​​两个 2x1 和一个 1x1)。

我遇到的问题是，如果高度不匹配，瓷砖会留下一个洞:

在这种情况下，我希望左下角的深蓝色瓷砖向上移动一个空间并填充它与左上角的浅蓝色瓷砖之间的空白。

到目前为止，这是我的代码:

<div class="container">
    <div class="tile h2 w2"></div>  
    <div class="tile h1 w1"></div>  
    <div class="tile h1 w2"></div>
    <div class="tile h2 w1"></div>  
    <div class="tile h2 w2"></div>
    <div class="tile h1 w2"></div>          
</div>

和 CSS:

.tile{
    display: block;
    float: left;
    width: 20%;
    height: 200px;  
    background: #666;       
}

.tile.h1{height: 200px;}
.tile.h2{height: 400px;}
.tile.w1{width: 20%;}
.tile.w2{width: 40%;}

有一个名为 Packery 的插件可以解决这个问题，但我的同事不想使用外部插件。我尝试研究代码，但它非常复杂，我无法理解它的工作原理。

图 block 不会总是在同一个地方，刷新后(X 次)新闻会在“链”中上下移动，因此网格布局不会总是相同。

Answer 1

查看 http://masonry.desandro.com/ , 仅使用 css 是不可能做到这一点的，编写 JS 脚本是一个相当大的挑战，但是通过这个插件，您可以学习如何做到这一点。