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

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

淘建站为您提供更多_其它特效_瀑布流_瀑布流_加载，在此特别感谢您对我们的支持与厚爱！

在.wait_photo放置多张图片

<div class="wait_photo">
    <ul>
        <li>
            <a href="http://www.sucaiq.com/"><img src="images/1.jpg" /></a>
            <p><span><a href="http://www.sucaiq.com/"><img alt="" src="images/head1.jpg" style="width:24px;height:24px;" /></a><a href="http://www.sucaiq.com/">我的作品</a></span></p>
        </li>
        <li>
            <a href="http://www.sucaiq.com/"><img src="images/2.jpg" /></a>
            <p><span><a href="http://www.sucaiq.com/"><img alt="" src="images/head1.jpg" style="width:24px;height:24px;" /></a><a href="http://www.sucaiq.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'});
    });
}