强制切片占用所有可用空间

Question

我正在开发一个网站的新闻栏目，该网站包含网格中的图块，每个图块都是新闻。我试图制作类似于Windows 8开始菜单的东西，但是使用可变高度的瓷砖。有四种尺寸的瓷砖：1x1,1x2,2x1和2x2。

网格的每一行都有5个图块的空间，如果它们是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的插件可以解决此问题，但我工作的人并不想使用外部插件。我试着研究代码，但它非常复杂，我很难理解它是如何工作的。

瓷砖不会总是在同一个地方，刷新后（X时间）新闻将在＆＃34;链条上下移动，因此网格布局并不总是如此是一样的。

Answer 1

查看http://masonry.desandro.com/，用css做这件事是不可能的，编写JS脚本是一个很大的挑战，但是从这个插件中你可以学习如何做到这一点。