利用jquery 插件能够自适应的瀑布流
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width: 220px;
}
.box img {
max-width: 100%
}
</style>
</head>
<body>
<div id="masonry" class="container-fluid">
<div class="box"><img src="1.jpg"></div>
<div class="box"><img src="2.jpg"></div>
<div class="box"><img src="3.jpg"></div>
<div class="box"><img src="4.jpg"></div>
<div class="box"><img src="5.jpg"></div>
<div class="box"><img src="6.jpg"></div>
<div class="box"><img src="7.jpg"></div>
<div class="box"><img src="8.jpg"></div>
<div class="box"><img src="9.jpg"></div>
</div>
<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>
$(function() {
var $container = $('#masonry');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.box',
gutter: 20,
isAnimated: true,
});
});
});
</script>
</body>
</html>
920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
