使用jquery插件实现瀑布流效果

   html部分：

< div id= "container " class= "clr" >

< div class= "item" >

< img src= "#" / >

</ div >

</ div >

CSS部分：

.item{ float: left;margin: 0px 7px 15px;overflow: hidden;width: 290px;}

.item img{display: block;width: 290px;height: auto;}

JS部分：

先引入两个JS脚本

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>//可在线引用可引用本地
<script src="jquery.masonry.min.js"></script>

<script type="text/javascript">

window.onload=function () {
    var $container = $('#container');
    imagesLoaded($container,function(){
        $container.masonry({
            itemSelector: '.item',
            isAnimated: true,
            // columnWidth: 290, //控制行宽
            isFitWidth: true
        });

    });

</script>