Bootstrap照片的瀑布流实现

瀑布流是我们在网站建设中经常需要实现的布局，好在一个非常好用的第三方插件 — Masonry已经为我们实现了。

Masonry 官网

Masonry Github地址

以下是Masonry中参数的所代表的意义：

参数

itemSelector(必须)：

指定在布局中的哪些子元素会被使用

columnWidth(必须)：

用来对其元素和网络，如果没有写，那么会自动选择第一个元素的width作为columnWidth

无论是使用确切像素还是使用百分百，宽应该是成倍数递增的关系：

.grid-item {
    width:100px
}

.grid-item2 {
    width:200px
}

.grid-item3 {
    width:300px
}

/* 或者 */

.grid-sizer,
.grid-item {
    width:20%
}

.grid-item2 {
    width:40%
}

.grid-item3 {
    width:60%
}

/* 使用百分比，则需要添加参数：percentPosition：true */

gutter

水平方向上，两个元素值之间的间隔

如果使用了百分比，则需要：

css文件中：

.gutter-sizer {
    width:4%
}

js中：

gutter:'.gutter-sizer'

如果你要垂直方向的间隔，可以直接在css中设定 margin-botton: 10px 类似

horizontalOrder

排列的时候尽可能的水平方向有序

percentPosition

当用百分比设定了宽度的时候使用

stamp

占位，不会在此区域内排列

<div class='stamp'></div>

stamp:'.stamp'

fitwidth

这个选项是可以将作为container父容器宽度，与元素列数适应的选项

当只用一列时，父容器的宽度也只有一列，扩展到两个元素的时候，父容器宽度就是两列

要使用fitWidth,就不能使用百分比宽度，否则子元素之间会互相重叠

需要将父容器内部居中

.grid {
    margin:0 auto
}

js文件设定相关

fitWidth: true

originTop / originLeft

默认是从上到下，从左到右边，排列的，通过这两个选项，选择排列的方向

containerStyle

可以清除父容器的样式

containerStyle: null

transitionDuration

css 动画的加载时间

stagger

我们可以看到，在item大小变化的重排的过程中，每一个item的移动之间的世家是错开的，stagger就是设定这个错开的时间

stage: 30 // 30毫秒

resize

可以通过设定 resize 为 false，来禁止window大小改变时，item大小的改变

initLayout

为了在初始化之前使用方法和事件，你需要设定 initLayout:false

其他辅助插件

在浏览的时候，有些图片可能加载不出来，所以需要imagesLoaded来探测图片是否加载，只有加载好了才进行布局

imagesloaded

只有当图片出现在屏幕，我们才进行图片的加载，这样可以节约内存

lazyload

我自己搭建的blog网站就用到了上面的知识，欢迎参观

Bootstrap实现瀑布流照片显示