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

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

收藏评论

上一篇: 可打印页面特定元素的jquery打印插件printThis

下一篇: 基于jquery.rotate插件制作的红包新云大转盘抽奖示例演示