流式布局的使用方法--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();
原文地址:https://www.cnblogs.com/zhao1949/p/6494706.html