图文流布局

Posted 2020-12-30 hepc

1、插件
（1）Masonry
https://masonry.desandro.com/
Masonry是最流行的瀑布流插件之一，配置简单，功能强大。
注意：如果你需要加载图片，Masonry不会在图片加载完后重新布局，这可能会影响你的布局效果
（2）imagesLoaded
https://imagesloaded.desandro.com/
imagesLoaded是一个图片加载插件,能够监测图片的加载状态。

2、使用
（1）MVC借助Masonry实现图文瀑布流
https://www.cnblogs.com/darrenji/p/3784894.html
（2）瀑布流插件Masonry的配置和使用
https://segmentfault.com/a/1190000007316788
（3）图片加载插件imagesLoaded的配置和使用
https://segmentfault.com/a/1190000007316974

3、DEMO
<style type="text/css">
.grid-item {
width:280px;
margin:0 8px 14px 0;
text-align:left;
padding:10px;
float:left;
display:none;
border: solid 1px #DDD;
background: #EEE;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, .3);
-webkil-box-shadow:0 1px 3px rgba(0, 0, 0, .3);
box-shadow:0 1px 3px rgba(0, 0, 0, .3);
}

.grid-item img {
width:260px;
}
</style>

<div id="grid">
<div class="grid-item">
<img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529206747.jpg" onclick="location.href = ‘/play‘;">
</div>
<div class="grid-item"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2519070834.jpg">
</div>
<div class="grid-item"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2526297221.jpg">
</div>
<div class="grid-item"><img src="http://www.666kao.com/pic/uploadimg/2017-12/201712210314398443.jpg">
</div>
<div class="grid-item"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2505485040.jpg">
</div>
<div class="grid-item"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2526405034.jpg">
</div>
</div>

$(function () {
var container = $(‘#grid .grid-item‘);
var masonryContainer = $(‘#grid‘);
//imagesLoaded是一个图片加载插件,能够监测图片的加载状态
container.imagesLoaded(function () {
container.fadeIn();
//初始化Masonry
masonryContainer.masonry({
itemSelector: ‘.grid-item‘,
isAnimated: true
});
});
});