List Masonry 瀑布流
瀑布流布局。
基础用法
默认情况下，列数会根据容器宽度自动计算。
默认宽度与列数的对应关系如下：
> 1200px --> 6 列
> 800px --> 4 列
> 500px --> 4 列
> 200px --> 2 列
> 0px --> 2 列
如果想要自定义宽度与列数的对应关系，可以通过监听 xtt-resize 事件来实现。
改变 xtt-resize 事件的 event.detail.next 属性，可以改变列数。
html
<xtt-list-masonry style="resize: horizontal">
<xtt-list-masonry-item v-for="(item, index) in lists">
<div :style="{ background: item.background, height: item.height, width: item.width }">{{index}}</div>
</xtt-list-masonry-item>
</xtt-list-masonry>