Question

我试图创造一个＆＃34; Pinterest＆＃34;使用Material Design Lite进行样式布局。最大的问题是，到目前为止，我只能用相同高度的卡片创建它。

我已经能够使用CSS和列数（没有MDL），但我想使用MDL提供的样式。如果我使用MDL列计数，它会导致一些奇怪的布局。我的卡片大小不一，当它们内部有巨大的间隙时看起来很糟糕，因为网格布局使它们在高度上均匀。我希望这是有道理的。如有必要，我可以粘贴我的Wordpress主题代码，但我不确定是否有任何帮助。

我希望有人可以帮助我： - ）

Answer 1

您可以使用此轻量级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/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>

带卡片的材料设计精简砖石布局

1 个答案: