jquery的masonry框架制作图片流

最新推荐文章于 2024-08-19 11:32:15 发布

上帝De助手

最新推荐文章于 2024-08-19 11:32:15 发布

阅读量3.3k

点赞数

分类专栏： html 文章标签： jquery masonry 图片流

本文链接：https://blog.csdn.net/five3/article/details/51691803

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>flow</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>
<script>
var l = function() {
    var $container = $('#masonry');
    $container.imagesLoaded(function() {
        $container.masonry({
                itemSelector: '.box',
                gutter: 20,
                isAnimated: true,
            });
     });
}
function loadmore(){
	var elements = $('<div class="box"><img src="./666.jpg"></div>\
					<div class="box"><img src="./777.jpg"></div>\
					<div class="box"><img src="./888.jpg"></div>\
					<div class="box"><img src="./111.jpg"></div>');
	$('#masonry').append(elements);
	$('#masonry').masonry('appended', elements, true);
}
</script>
<style>
.container-fluid {
  padding: 20px;
  }
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
	width: 1170px;
}
  
  
.box {
  margin-bottom: 20px;
  float: left;
  width: 260px;
  }
.box img {
  max-width: 100%
}

</style>

</head>
<body>
<div class="container">
	<ul id="masonry" class="container-fluid">
	  <li class="box"><a><img src="./111.jpg"></a></li>
	  <li class="box"><a><img src="./222.jpg"></a></li>
	  <li class="box"><a><img src="./333.jpg"></a></li>
	  <li class="box"><a><img src="./444.jpg"></a></li>
	  <li class="box"><a><img src="./555.jpg"></a></li>
	  <li class="box"><a><img src="./666.jpg"></a></li>
	  <li class="box"><a><img src="./777.jpg"></a></li>
	  <li class="box"><a><img src="./888.jpg"></a></li>
	  <li class="box"><a><img src="./444.jpg"></a></li>
	  <li class="box"><a><img src="./555.jpg"></a></li>
	  <li class="box"><a><img src="./111.jpg"></a></li>
	  <li class="box"><a><img src="./222.jpg"></a></li>
	  <li class="box"><a><img src="./333.jpg"></a></li>
	  <li class="box"><a><img src="./444.jpg"></a></li>
	  <li class="box"><a><img src="./555.jpg"></a></li>
	</ul>
</div>
<a href="javascript:void(0);" οnclick="javascript:loadmore();">load more</a>
<script>
$(l);
</script>
</body>
</html>

效果：