jQuery瀑布流插件-Masonry瀑布流特效代码分享

将每个小内容块放入具有相关类的容器中，然后将所有内容块放入一个大容器中。在这里，我们将内容块图像放入带有 .box class

标签的容器中，然后在带有 #masonry ID 的

中使用它们。我们稍后将使用#masonry ID 和.box 类来触发瀑布流。

3。 CSS：

.container-fluid {
内边距：20px；
}
。盒子 {
下边距：20px；
向左飘浮;
宽度：220px；
}
.box img {
最大宽度：100%
}

说明：对于第二步的页面代码，我们需要添加一点样式。我们向 .box 类添加了一个浮动属性并设置了其宽度。

4。在页面上启用瀑布流脚本代码

$(函数() {
var $container = $('#masonry');
$container.imagesLoaded(function() {
$container.masonry({项目选择器：'.box'，
天沟：20，
isAnimated: 真实,
});
});
});

说明：这里我们首先找到我们要使用瀑布流的大容器。这是带有 #masonry ID 的

标签，位于 var $container = $('#masonry') ; 在此行代码中定义。然后我们还需要解释瀑布流中每个内容块容器上的公共类是什么。这是具有 .box 类的

标记，位于代码中定义的 itemSelector: '.box', 行中。

gutter: 20，这行代码定义了内容块之间的距离为20像素，可以注释掉，然后用css来划分间距！

isAnimated: true,这行代码可以开启动画选项，即当窗口宽度改变时，每行显示的内容块数量会发生变化，这个变化就会使用动画影响。

（感谢网友阿福）提供非居中显示！我的一个笨方法：

$(函数() {
var $objbox = $("#masonry");
var 装订线 = 25;
var centerFunc, $top0;
$objbox.imagesLoaded(函数() {
$objbox.masonry({
itemSelector: "#masonry > .box",
天沟： 天沟，
是否动画：true
});
中心函数 = 函数() {
$top0 = $objbox.children("[style*='top: 0']");$objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent(). css(“溢出”，“隐藏”);
};
centerFunc();
});
var tur = true；
$(窗口).调整大小(函数(){
如果（图尔）{
setTimeout（函数（）{
tur = true;
centerFunc();
},
1000）；
图=假；
}
});
});

收藏点赞 (0)