jQuery瀑布流以动画animate加载图片

收藏

本文演示了瀑布流下拉加载的效果，稍微跟其他瀑布流不同的是：加载的时候以动画animate的效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

在.wait_photo放置多张图片

<div class="wait_photo">
    <ul>
        <li>
            <a href="http://www.erdangjiade.com/"><img src="images/1.jpg" /></a>
            <p><span><a href="http://www.erdangjiade.com/"><img alt="" src="images/head1.jpg" style="width:24px;height:24px;" /></a><a href="http://www.erdangjiade.com/">我的作品</a></span></p>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/"><img src="images/2.jpg" /></a>
            <p><span><a href="http://www.erdangjiade.com/"><img alt="" src="images/head1.jpg" style="width:24px;height:24px;" /></a><a href="http://www.erdangjiade.com/">我的作品</a></span></p>
        </li>
    </ul>
</div>

引入瀑布流插件

<script type="text/javascript" src="js/photo_water.js"></script>

当滚动条下拉的时候，若当前网页高度比滚动条滚动高度和窗口高度的和小于20的时候，加载图片

$(window).scroll(function() {
    if ($(document).height() - $(this).scrollTop() - $(this).height() < 20) {
        loadimg();
    }
});

加载图片方法

function loadimg() {
    if (!isOk) {
        isOk = true;
        for (var i = 0; i < 10; i++) {
            var text = " <li class='photo_li" + index_photo + "'><a><img src='images/1.jpg' /></a> <p> " +
                    " <span> <a ><img   src='images/head1.jpg' style='width: 24px; height: 24px;'>" +
                    "</a>  <a >我的作品</a><br /> </span> </p> </li>";
            $(".wait_photo li").last().after(text);
            getPhotoIndex();
        }

        $(".wait_photo .photo_li" + index_photo).slideToggle(1500);
        index_photo++;
        imgHover();

        setTimeout("iSPhoto()", 1000);
    }
}

当鼠标移动到图片上加上透明度opacity效果

function imgHover() {
    $('.wait_photo li img').hover(function() {
        var $this = $(this);
        $this.stop().animate({'opacity': '0.8', 'top': '0px', 'left': '0px'});
    }, function() {
        var $this = $(this);
        $this.stop().animate({'opacity': '1.0', 'top': '-66.5px', 'left': '-150px'});
    });
}