基於Bootstrap好用的瀑布流

文章出處：http://www.htmleaf.com/jQuery/pubuliuchajian/201704104447.html

由於工作中正好需要，無奈能力總是差了那么一點，只能站在巨人的肩膀上改一改，用一用，改造過程忽略，只收集結果，上干貨！

HTML部分（簡單的不能再簡單了，哈哈）：

<div class="ListFlow">

</div>

JS部分：

重點，引用了一個JS插件，bootstrap-waterfall.js 插件。（JS插件可自行在文章開頭出處的網址中下載。）

爪機JS部分：

<script id="waterfall-template">
    var list = {
    'dataImg': [{
        'img': '07.jpg',
        'title': '111111111',
        'desc': '2019年啦！'
    }, {
        'img': '06.jpg',
        'title': '22222222222',
        'desc': '2019年啦！'
    }, {
        'img': '08.jpg',
        'title': '33333333333',
        'desc': '2019年啦！'
    }, {
        'img': '03.jpg',
        'title': '444444444',
        'desc': '2019年啦！'
    }]
};

var contenthtml ="";
    $.each(list.dataImg, function(index,value) {
        contenthtml+="<div class=\"ListCon\">";
        contenthtml+="<div class=\"thumbnail\">";
        contenthtml+="<h5><a href=\"detail.html\">"+value.title+"</a></h5>";
        contenthtml+="<div class=\"img-thumbnail\">";
        contenthtml+="<a href=\"detail.html\"><img src=\"images/"+value.img+"\" class=\"img-responsive\"></a>";
        contenthtml+="</div>";
        contenthtml+="<div class=\"caption\">";
        contenthtml+="<p>"+value.desc+"</p>";
        contenthtml+="<p class=\"shadowBg\">";
        contenthtml+="<a href=\"addnew.html\" class=\"glyphicon glyphicon-pencil\" role=\"button\"></a>";
        contenthtml+="<a href=\"javascript:;\" class=\"glyphicon glyphicon-trash\" role=\"button\"></a>";
        contenthtml+="</p>";
        contenthtml+="</div>";
        contenthtml+="</div>";
        contenthtml+="</div>";
            
                
    });
    $('#waterfall-template').html(contenthtml);
    
    

  $('.ListFlow').data('bootstrap-waterfall-template', $('#waterfall-template').html()).waterfall();
    
</script>

樣式其實沒有太大影響，靜態頁面寫好，補充JS部分就可以正常使用了。其實最有用的只有Js 的最后一行。。o(∩_∩)o 

 

當當當當當。。。視覺效果如下：

 

另外，推薦一個多種方式實現web瀑布流的布局，https://www.jianshu.com/p/0a9b27e7da36  都是非常好的學習資料呢！