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