基于Masonry插件的小小瀑布流
原创
©著作权归作者所有：来自51CTO博客作者冷月心_bytedance的原创作品，请联系作者获取转载授权，否则将追究法律责任
目录结构
插件官网
效果图
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>改了改官网的小demo</title>
<style>
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
body { font-family: sans-serif; padding:40px;}
/* ---- grid ---- */
.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 25%;
}
.grid-item {
float: left;
padding:30px;
}
.grid-item img {
display: block;
width:360px;
}
h2{text-align:center;}
</style>
</head>
<body>
<h2>基于Masonry的小小瀑布流</h2>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img src="./images/1.jpg" />
<p>千万别跟我客气，早晚都是一家人</p>
</div>
<div class="grid-item">
<img src="./images/2.jpg" />
<p>你一辈子的情人，是你自己</p>
</div>
<div class="grid-item">
<img src="./images/3.jpg" />
<p>听你晨钟暮鼓，伴我余生一梦。</p>
</div>
<div class="grid-item">
<img src="./images/4.jpg" />
<p>既然你在我心里已经好久好久了，那就别想走了。</p>
</div>
<div class="grid-item">
<img src="./images/5.jpg" />
<p>直到遇见你，我才明白，那种看着一个人，就会莫名微笑的感觉。</p>
</div>
<div class="grid-item">
<img src="./images/6.jpg" />
<p>尽管这世间五味俱全，我也只想要你给的甜。</p>
</div>
<div class="grid-item">
<img src="./images/7.jpg" />
<p>美食就像合拍的你，每一口都觉得，来此世间，不虚此行。</p>
</div>
<div class="grid-item">
<img src="./images/8.jpg" />
<p>遇见你不是巧合，是我花了半辈子，费尽心思的谋算，还好，你是我的了。</p>
</div>
<div class="grid-item">
<img src="./images/9.jpg" />
<p>最美的就是遇见，原本我是不信的，直到老天让我碰到了你。</p>
</div>
<div class="grid-item">
<img src="./images/10.jpg" />
<p>嘿，你好啊，女朋友。</p>
</div>
<div class="grid-item">
<img src="./images/11.jpg" />
<p>我想送你个礼物，选来选去都不满意，不如，把我自己给你吧。</p>
</div>
<div class="grid-item">
<img src="./images/12.jpg" />
<p>这间房里应有尽有，但我还是觉得差了些什么，仔细想了下，差一个女主人。</p>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./masonry.pkgd.min.js"></script>
<script>
//官网的东西，不多解释了，引包，布局，文字，图片，干就完了
//原理其实是定位，每个图片宽度一致，高不一样，形成参差错落感
//这是响应式的，可以改变浏览窗口大小查看，带有动画，这都是 Masonry插件集成好的，直接用
// init Masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer'
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
</script>
</body>
</html>
小建议
