Masonry - 瀑布流布局

[imjeen]

使用CSS的多列布局

• 属性 column-count 设置特定数量的列数
• 属性 column-width 设置期望的最小列宽。（如果 column-count 没有设置，那么浏览器就会以合适的宽度尽量显示更多的列。）

使用简写属性 columns 书写

• 声明 column-count: 8 和 column-width:12em 等效于 columns:12 8em
• 声明 column-count:4 等效于 columns:4
  -声明 column-width:12em 等效于 columns:12em

兼容性： https://www.caniuse.com/#search=columns

<main class="masonry">
    <section class="item>1</section>
    <section class="item>2</section>
    <section class="item>3</section>
    <section class="item>4</section>
    <!-- more items -->
</main>

.masonry{
    column-count: 3; /* 列数 */
}
.item{
    break-inside: avoid; /* 元素不能中断 */
}

参考

• css-tricks: Approaches for a CSS Masonry Layout
• 掘金：深度解析瀑布流布局
• csswg-draft: #945、#4650
• Isotope