jquery.masonry瀑布效应

1。加载jQuery插件和插件的jquery.masonry分别

两。瀑布流本地风格代码

{容器流体
填料：20px；
}
{。箱
边距：20px；
浮点数：左；
宽度：220px；
}
箱{ IMG。
马克斯宽度：100%
}

解释：对于第二步的页面代码，我们需要添加一点样式，我们添加浮点属性，并设置其宽度。

三。页面瀑布流布局html代码

解释：把每个内容块中的相关类容器，然后把所有的内容在一个大的容器，在这里我们把照片放在一块的内容A.箱类标签，然后把它们再次与#砌体的ID，我们将使用#砌体ID和盒子一个。而瀑布流触发使用。

四。初始化瀑布插件的jQuery脚本代码

$（函数（）{（））
VaR的容器（#美元=美元砌体）；
container.imagesloaded美元（函数（）{（）
container.masonry美元（{
itemselector：盒子，
GutterWidth：20，
isanimated：真，
}）；
}）；
}）；

解释：在这里，我们首先找到一个大容器，我们想使用瀑布流。这里是一个标签#砌体的ID，这是美元=美元（VAR容器定义的#砌体的）。然后我们说明瀑布流的每个内容块的容器在一起是什么，这里是类。箱中itemselector标签：。盒子，这条线code.gutterwidth定义：20，这行代码定义内容块之间的距离是20像素，isanimated：真的，这个代码可以打开动画选项，改变窗口的宽度时，每行显示的块的数量，内容将发生变化，这种变化将使用动画。

演示下载地址瀑布流

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。