使用MDL的砌体布局

Question

我正在尝试使用mdl-grid和mdl-cell创建动态图块，但单元格会拉伸到该行中列的最大高度。

看到差异这是Angular材料设计的例子。这里的图块是动态显示的，并且列不占用该行中其他列的最大宽度。

http://codepen.io/anon/pen/bpbxzz

以下是使用material lite的第二个示例，但是在这里您可以看到列是拉伸

http://codepen.io/anon/pen/xVKaod

有什么方法可以使用MDL创建动态磁贴？

更新

经过几个小时的研究，我发现这种方法被称为砌体布局。我搜索了它，发现了下面的那些。但是我无法用flex布局来做到这一点。

1）JQuery插件https://github.com/desandro/masonry

2）这是CSS3 http://web.archive.org/web/20111226183221/http://sickdesigner.com/index.php/2011/html-css/masonry-css-getting-awesome-with-css3

这是另一个链接 http://jsfiddle.net/RTLun/

此处为stackoverflow链接

Compact arrangement of DIVs in two directions

更新

我发现上面的链接并没有维护项目的顺序，但是这个链接没有。但是找不到CSS代码来做这个

http://michieldewit.github.io/isotope-modulo-columns/

谢谢

Answer 1

使用http://masonry.desandro.com/，它非常适合我。

<div class="mdl-grid masonry-grid">
    <div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item">
    </div>
    <div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item">
    </div>
</div>
<script src="https://unpkg.com/masonry- layout@4/dist/masonry.pkgd.min.js"></script>
<script>
    var elem = document.querySelector('.masonry-grid');
    var msnry = new Masonry( elem, {
    // options
    itemSelector: '.masonry-grid-item'
    });
</script>