jquery插件实现瀑布流
Posted newmiracle
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery插件实现瀑布流相关的知识，希望对你有一定的参考价值。
jquery插件实现瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width:400px;
}
.box img {
width:100%;
}
</style>
<body>
<div id="masonry" class="container-fluid">
<div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/5840871504671934.jpg"></div>
<div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/6829101504671934.jpg"></div>
<div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/3246161504671934.jpg"></div>
<div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/3458731504671934.jpg"></div>
<div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/8541471504671894.jpg"></div>
...
</div>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="{$yuming}/js/masonry-docs.min.js"></script>
<script>
$(function() {
var $container = $(‘#masonry‘);
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: ‘.box‘,
gutter: 20,
isAnimated: true,
});
});
});
</script>
</body>
</html>
以上是关于jquery插件实现瀑布流的主要内容，如果未能解决你的问题，请参考以下文章
使用jquery.masonry.min.js 插件时，在页面底部添加加载更多按钮，实现点击按钮后瀑布流才加载图片出来。
jQuery瀑布流简单实现（imagesloaded+masonry）
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件