材料设计生活砌体布局用卡

Question

我正在尝试用Material Design Lite创建一个"Pinterest"风格的布局。最大的问题是，到目前为止，我只能用相同高度的卡牌创建它。

我已经能够用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>