使用瀑布流插件masonry.js和延迟加载插件lazyload.js结合实现的示例

使用瀑布流插件masonry.js和延迟加载插件lazyload.js结合实现的示例
Masonry.js是一个以“瀑布流”布局呈现网页元素的JS库,它根据可用的垂直空间将元素放置在最佳位置,就像瀑布的流水一样。不仅是最流行的瀑布流插件之一,而且功能强大、配置简单,在开源平台Github上收获了1.6w星。可以使多个不规则宽高的元素以恰当的顺序排列 ,增加美观度。

入门指南

使用教程

引入脚本

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>

HTML代码

<ul class="waterfall-wapper">
    <li class="item"      >01<br/><img src="img/loading.gif" data-original="img/1.jpg" /></li>
    <li class="item w2 h2">02<br/><img src="img/loading.gif" data-original="img/2.jpg" /></li>
    <li class="item h3"   >03<br/><img src="img/loading.gif" data-original="img/3.jpg" /></li>
    <li class="item h2"   >04<br/><img src="img/loading.gif" data-original="img/4.jpg" /></li>
    <li class="item w3 h4">05<br/><img src="img/loading.gif" data-original="img/5.jpg" /></li>
    <li class="item h4"   >06<br/><img src="img/loading.gif" data-original="img/6.jpg" /></li>
    //省略部分代码
    <li class="item"      >50<br/><img src="img/loading.gif" data-original="img/1.jpg" /></li>
    <li class="item h3"   >51<br/><img src="img/loading.gif" data-original="img/1.jpg" /></li>
</ul>

CSS样式

.waterfall-wapper{
    width:1024px;
    margin:0 auto;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 40px;
    text-align: center;
    line-height: 60px;
    margin-bottom: 20px;
    color: #FFF;
    float: left;
    background-color: #9432BA;
    border: 2px solid #D29BE7;
    border-radius: 5px;
    overflow: hidden;
}

.item    { width: 100px; }
.item.w2 { width: 200px; }
.item.w3 { width: 300px; }
.item.w4 { width: 400px; }

.item    { min-height:  60px; }
.item.h2 { min-height: 120px; }
.item.h3 { min-height: 180px; }
.item.h4 { min-height: 240px; }

JavaScript初始化

$(function() {
    //页面加载完成时调用初始化瀑布流方法
    initWaterFall();

    $("img").lazyload({
        effect:"fadeIn",
        failurelimit:40,
        load:initWaterFall, //图片加载完成后初再次调用始化瀑布流
    });
});

function initWaterFall() {
    $('.waterfall-wapper').masonry({
        gutterWidth: 20,
        itemSelector: '.item',
        isAnimated: true,
    });
}

the end