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

}

.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();