test
/
ceshi.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.con-bg{width:980px;background:#fff; margin:0 auto; overflow:hidden; padding-top:8px; padding-bottom:10px;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
box-shadow:2px 2px 10px #909090;/*opera或ie9*/}
.w960{width:960px;margin:0 auto;overflow:hidden;}
.fl_lt{float:left !important;}
.mt_10{margin-top:10px;}
.w650{width:960px;}
.position{height:38px;line-height:38px;font-size:14px;color:#666;border-bottom:none;}
.position a{padding:0px 5px;color:#404040;}
.position a.home{background:url(../images/flower_ico.gif) no-repeat;padding-left:35px; display:inline-block;}
span.bds_more{line-height:16px !important;}
#bdshare span.bds_more{background:none !important;}
.w650{width:960px;padding-top:15px;}
.w650 ul.tips{float:left;margin-left:10px; display:inline; position:relative;}
.w650 li{ position:absolute;display:inline;padding-bottom:20px;}
.w650 li{width:220px;height:auto;text-align:center;overflow:hidden;}
.w650 li a{width:200px;height:auto;background:#fff;border:1px solid #ddd;padding:9px 9px 2px 9px;display:block;cursor:pointer;-webkit-border-radius:2px;
-o-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.w650 li a span{height:38px;line-height:38px;color:#333;overflow:hidden;display:block;font-size:14px;}
.w650 li a:hover span{color:#9c0f4a;}
.w650 li a:hover{background:#fff;border:1px solid #c5c5c5;color:#9c0f4a;}
.p_t{padding-top:7px;}
</style>
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/waterfall.js" ></script>
</head>

<body>
 <div class="con-bg">
  <div class="w960 mt_10">
    <div class="w650">
    <div class="loading"><img src="images/loading.gif" /></div>
    	<ul class="tips" id="wf-main" style="display:none" >
<li class="wf-cld"><img src="images/photo/8.jpg"  width="200" height="178" alt="" /></li>
<li class="wf-cld"><img src="images/photo/1.jpg" height="147" width="200" alt="" /></li>
<li class="wf-cld"><img src="images/photo/2.jpg"  width="200" height="267" alt="" /></li>
<li class="wf-cld"><img src="images/photo/3.jpg"  width="200" height="125" alt="" /></li>
<li class="wf-cld"><img src="images/photo/4.jpg" width="200" height="299" alt="" /></li>
<li class="wf-cld"><img src="images/photo/5.jpg" width="200" height="125" alt="" /></li>
<li class="wf-cld"><img src="images/photo/6.jpg" width="200" height="267" alt="" /></li>
<li class="wf-cld"><img src="images/photo/7.jpg" width="200" height="135" alt="" /></li>
<li class="wf-cld"><img src="images/photo/9.jpg"  width="200" height="300" alt="" /></li>
<li class="wf-cld"><img src="images/photo/10.jpg"  width="200" height="107" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/8.jpg"  width="200" height="178" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/1.jpg" height="147" width="200" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/2.jpg"  width="200" height="267" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/3.jpg"  width="200" height="125" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/4.jpg" width="200" height="299" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/5.jpg" width="200" height="125" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/6.jpg" width="200" height="267"alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/7.jpg" width="200" height="135" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/9.jpg"  width="200" height="300" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/10.jpg"  width="200" height="107" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/2.jpg"  width="200" height="267" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/3.jpg"  width="200" height="125" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/8.jpg"  width="200" height="178" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/1.jpg" height="147" width="200" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/2.jpg"  width="200" height="267" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/3.jpg"  width="200" height="125" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/4.jpg" width="200" height="299" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/5.jpg" width="200" height="125" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/6.jpg" width="200" height="267"alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/7.jpg" width="200" height="135" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/9.jpg"  width="200" height="300" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/10.jpg"  width="200" height="107" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/2.jpg"  width="200" height="267" alt="" /></li>
<li class="wf-cld"><img rel="lazy" lazy_src="images/photo/3.jpg"  width="200" height="125" alt="" /></li>


        </ul>

    </div>
  </div>
</div>
  <script>

    var timer, m = 0, m1 = $("img[rel='lazy']").length;

    function fade() {

        $("img[rel='lazy']").each(function () {

            var $scroTop = $(this).offset();

            if ($scroTop.top <= $(window).scrollTop() + $(window).height()) {

                $(this).hide();

                $(this).attr("src", $(this).attr("lazy_src"));

                $(this).attr("top", $scroTop.top);

                $(this).removeAttr("rel");

                $(this).removeAttr("lazy_src");

                $(this).fadeIn(600);

                var _left = $(this).parent().parent().attr("_left");

                if (_left != undefined)

                    $(this).parent().parent().animate({ left: _left }, 400);

                m++;

            }

        });

        if (m < m1) { timer = window.setTimeout(fade, 300); }

        else { window.clearTimeout(timer); }

    }

    $(function () {

        $("#wf-main img[rel='lazy']").each(function (i) {

            var _left = $(this).parent().parent().css("left").replace("px", "");

            $(this).parent().parent().attr("_left", _left);

            $(this).parent().parent().css("left", 0);

        });

        fade();

    });

    $(".loading").hide();

    $("#wf-main").show();

</script>
</body>
</html>