瀑布流插件Masonry组件自动添加序号，如图 1，css自动添加序号 .grid { background: #EEE; max-width: 1200px; counter-reset: grid-item; } .grid-item:before { counter-increment: gri...

你可以使用Bootstarp的栅格系统来控制瀑布流布局。（官方是Bootstrap3，这里改为Bootstrap4，没什么大区别） 下面的例子使用col-4作为columnWidth来实现3列布局 示例展示>> 使用Bootstrap网格媒体查询多个.col-类在组件上，实现响应式布局 下面的例子...

originTop 控制垂直布局，默认状态下originTop: true控件从上到下布局，设置originTop: false后，控件从下向上布局。 originTop Masonry v3使用isOriginTop，在Masonry v4之后isOriginTop也是被兼容的。 示例展示>>

originLeft 控制水平布局，默认状态下originLeft: true控件从左到右布局，设置originLeft: false后，控件从右向左布局。 originLeftMasonry v3使用isOriginLeft，在Masonry v4之后isOriginLeft也是被兼容的。 示例展示>>

fitWidth 根据父级容器的尺寸，设置容器的宽，以适应可用的列数。 启用之后可以通过css将容器grid居中 fitWidth: true不适用于组件百分比宽度。 要么通过js给columnWidth设置一个固定宽度，如columnWidth: 120 要么通过css给组件设置一个宽度如：width:120px...

stamp 指定组件为stamp。Masonry在布局时会避开这些组件。 配置项stamp只在Masonry实例第一次初始化完成后黏贴指定组件，但你可以通过stamp method更改后续的stamp布局。 示例展示>>

percentPosition 设置组件的位置（尺寸）为百分比而非像素数。percentPosition: true可以使宽度为百分比的组件不改变他们原本的位置。 测试了一下，true和false没什么区别。 示例展示>>

horizontalOrder:true 使组件水平方向按照从左到右排列 示例展示>> horizontalOrder:false默认 组件水平方向是无序的 示例展示>>

gutter 组件间距 在js配置项gutter可以设置组件的横向间距 示例展示>> 使用CSS margin可设置组件的纵向间距 示例展示>> 在响应式布局中使用组件尺寸将宽度设置为百分比时，可以将gutter的值设置为选择器字符串或者一个元素 ...

columnWidth 用于在水平网格上对齐组件，设置组件列宽 我们建议设置columnWidth，如果没有设置columnWidth，Masonry将使用第一个组件的外宽作为默认值。 示例展示>> 使用组件尺寸，在响应式布局中奖组件的宽度设置成百分比，设置columnWidth时，将值设置为指定组件选...

itemSelector 用于指定参与布局的子组件。 建议始终设置项，用于区分参组件元素是否参与布局。 图中的.static-banner是不参与瀑布流的。 示例展示>>

CDN <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <!-- or --> <script src="https://unpkg.com/masonry-layout...