如何使用jQuery砖石瀑布插件的详细说明

使用jQuery砖石插件创建瀑布流页面

我们可以使用jQuery的砖石插件来实现这种页面形式。下面是如何做到这一点。

1.分别下载jQuery和砖石，然后加载到页面中使用。

加载代码：

Script src=' http :http://libs . Baidu.com/jquery/1 . 8 . 3/jquery . min . js '/Script Script src=' http :http://jq 22 . qiniudn.com/砖石-docs.min.js'/Script说明：很简单，就是把下载的脚本文件嵌入到你想用瀑布流的页面中，注意文件名和路径，根据你的实际情况进行修改。

2.页面代码

div id=' massive ' class=' container-fluid ' div class=' box ' img src=' http :3358 jq 22.com/images/1 . jpg '/div class=' box ' img src=' http :http://jq 22.com/images/2 . jpg '/div class=' box ' img src=' http :3358 jq 22.com/images/3 . jpg '/./Div说明：将每个小的内容块放在一个有相关类的容器中，然后将所有的内容块放在一个大的容器中。这里，我们将内容块图片放在一个div标签中。框类，然后在带有#砖石ID的div中使用它们。稍后，我们将使用#砖石ID和。box类来触发瀑布流。

3.样式代码。容器-流体{ padding: 20px}.box { margin-bottom : 20px；向左浮动：宽度： 220 px；} .box img {max-width: 100%}说明：我们需要在第二步中为页面代码添加一点样式。我们向添加了一个浮动属性。框类并设置其宽度。

4.在页面中启用瀑布流形式的脚本代码

$(function(){ var $ container=$(' #砖石')；$ container . images loaded(function(){ $ container .砖石结构({ items electro : })。box '，gutter: 20，isAnimated: true，})；});});说明：在这里，我们先定位一下想要使用瀑布流的大容器是什么。这里是# mason ID的div标签，在var $ container=$ ('# mason ')中；在这一行代码中定义。然后我们还需要解释瀑布流中每个内容块容器上的公共类是什么。这是带有。box类，在这一行代码中定义：itemSelector : '。盒子。

Gutter: 20，这一行代码定义内容块之间的距离是20像素，isAnimated: true，这一行代码可以打开动画选项，也就是当窗口宽度改变时，每行显示的内容块数量会改变，而且这种改变会使用一种动画效果。

(感谢网友阿福)提供无中心展示！

我的一个愚蠢的方法：

$(function(){ var $ obj box=$(' #砖石')；var gutter=25var centerFunc，$ top0$ obj box . images loaded(function(){ $ obj box .圬工({ itemSelector: ' #圬工。' box '，檐槽：檐槽，is animated : true })；center func=function(){ $ top0=$ obj box . children('[style *=' top : 0 ']')；$objbox.css('left '，($ obj box . width()-($ top0 . width()* $ top0 . length装订线*(top0 . length-1)))/2)。父项()。css('溢出'，'隐藏')；};center func()；});var tur=true$(窗口)。resize(function(){ if(tur){ setTimeout(function(){ tur=true；center func()；}, 1000);tur=false} });});源代码下载：http://xiaozai.jb51.net/201701/yuanma/jQuery砌体(jb51.net)

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。