使用MDL砌体布局

Question

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

查看区别以下是来自Angular材料设计的示例。这里的图块是动态显示的，列没有取得该行其他列的最大宽度。

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

下面是使用材料精简版的第二个例子，但在这里你可以看到列拉伸

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

有什么办法，我可以创建一个使用MDL动态砖？

UPDATE

研究了几个小时后，我发现这种方法被称为砌体布局。我搜索了它，发现了下面的那些。但我无法用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/

这里计算器链接

Compact arrangement of DIVs in two directions

UPDATE

我发现上面的链接没有维护项目的顺序，但是这个呢。但无法找到的CSS代码使用http://masonry.desandro.com/做到这一点

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

感谢

Answer 1

，它完美对我的作品。

<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>