流式布局的使用方法--Masonry
http://www.jq22.com/demo/masonry/
范例
css部分
body { background-color: #c7cad0; } .post_box { background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); font-size: 12px; padding: 10px 8px; width: 250px; height: auto; overflow: hidden; margin-bottom: 10px; position: relative; z-index: 5; } .container-fluid { margin-right: 100px; margin-left: 100px; } .post_box img { height: auto; width: 234px; }
<div class="container-fluid"> <div class="post_area" id="masonry"> <div class="post_box"> <a target="_blank" href="/upload/browser/photos/293"><img alt="图片加载失败" src="/upload/photo/20170302/thumbnail/9f22c32aca3949398cde54e807cb129e.jpg" /></a> <div class="caption"> <a target="_blank" href="/upload/browser/photos/293"><h4>测试更新</h4></a> <p> 作者: <span>管理员</span> </p> </div> </div> <div class="post_box"> <a target="_blank" href="/upload/browser/photos/292"><img alt="图片加载失败" src="/upload/photo/20170302/thumbnail/cda7b7218f704559a53b668c60f36b06.jpg" /></a> <div class="caption"> <a target="_blank" href="/upload/browser/photos/292"><h4>test update</h4></a> <p> 作者: <span>管理员</span> </p> </div> </div>
window.onload = function(){ var $container = $('#masonry').masonry({ // options itemSelector: '.post_box', gutter:10, isAnimated: true }); }; //初始化图片流插件 var $container = $('#masonry').masonry({ // options itemSelector: '.post_box', gutter:10, isAnimated: true });
$('#masonry').masonry().append($items).masonry( 'appended', $items ).masonry();