材料設計精簡版砌體佈局

我試圖用Material Design Lite創建「Pinterest」樣式佈局。最大的問題是，迄今爲止，我只能在卡片高度相同的情況下創建它。材料設計精簡版砌體佈局

我已經能夠使用CSS和列數（無MDL）來做到這一點，但我想使用MDL提供的樣式。如果我使用MDL的列數，它會導致一些奇怪的佈局。我的卡片尺寸各不相同，當它們之間存在巨大間隙時，它看起來很糟糕，因爲網格佈局使它們高度平均。我希望這是有道理的。如果需要，我可以粘貼我的WordPress主題代碼，但我不確定是否有任何幫助。

我希望有人能幫助我了:-)

來源

2016-11-13 user7151495

是的，你需要粘貼你的代碼，錯誤在這裏。然後其他程序員可以幫助你。 – Sachith

你可以使用這個輕量級的JavaScript 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/[email protected]/dist/masonry.pkgd.min.js"></script> 
<script> 
    var elem = document.querySelector('.masonry-grid'); 
    var msnry = new Masonry(elem, { 
    // options 
    itemSelector: '.masonry-grid-item' 
    }); 
</script>

來源

2017-02-10 03:21:17 user2558013

材料設計精簡版砌體佈局

回答

相關問題