1. 程式人生 > >圖文流布局

圖文流布局

anim 圖片 lec poster log 狀態 tex isp left

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
});
});
});

技術分享圖片

圖文流布局