基于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  都是非常好的学习资料呢！