带卡片的材料设计精简版砌体布局答案

【问题标题】：Material design lite masonry layout with cards带卡片的材料设计精简版砌体布局
【发布时间】：2016-11-13 00:54:34
【问题描述】：

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

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

我希望有人可以帮助我:-)

【问题讨论】：

是的，您需要在此处粘贴代码，错误。然后其他程序员可以帮助你。

标签： masonry material-design-lite

【解决方案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>

【讨论】：