流式布局的使用方法--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();