瀑布流

 

CSS部分

#mid .item {
            width: 180px;
            padding: 0px;
            margin: 0 0 10px;
            background: #eee;
        }
        .item img 
        {
        width:100%;    
        }
        .item a {
            margin-right:1rem;
        }
        .mid 
        {
            margin: 0 auto;
        }
        .item p {
            padding: 1px 0px;
            font-size: 12px;
            text-align: center;
            color: #333;
            white-space: normal;
            width:100%;
        }

 

HTML部分

    <div  id="mid"  class="js-masonry mid">
        <div class="item">
            <a href="#"><img src="/pic/test/1.jpeg"></a>
            <p>11111111111111111111</p>
            <p><a class="am-badge am-badge-primary" href="#">航拍图</a><a class="am-badge am-badge-primary" href="##">CAD图</a></p>
        </div>

        <div class="item">
            <a href="#"><img src="/pic/test/2.jpeg"></a>
            <p>【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖</p>
        </div>
        <div class="item">
            <a href="#"><img src="/pic/test/3.jpeg"></a>
            <p>【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖</p>
        </div>
        <div class="item">
            <a href="#"><img src="/pic/test/4.jpeg"></a>
            <p>【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖</p>
        </div>
        <div class="item">
            <a href="#"><img src="/pic/test/5.jpeg"></a>
            <p>【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖</p>
        </div>
        <div class="item">
            <a href="#"><img src="/pic/test/1.jpeg"></a>
            <p>【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖</p>
        </div>
    </div>

JS启动部分

        var container = document.querySelector('#container');
        var msnry = new Masonry(container, 
        {
            // options...
            itemSelector: '.item',
            columnWidth: 180
        });
        masonryWidth();
        //鼠标在上样式
        $(function ()
        {
            $(".item").hover(function ()
            {
                $(this).css("background-color", "#ddd");
            },function () 
            {
                $(this).css("background-color", "#eee");
            });
        });
        function masonryWidth()
        {
            var w1 = document.body.clientWidth;
            var box = 180;
            var w2 = w1 - (w1 % box);
            $("#mid").width(w2);
            // 浏览器窗口变动
            window.onresize = masonryWidth;
       
        }