模仿米折网商品图片自动翻页效果

 function fun(){
    $(".productimg").each(function() {//遍历所有图片
        var othis = $(this),//当前图片对象
            top = othis.offset().top - $(window).scrollTop();//计算图片top - 滚动条top
        if (top > $(window).height()) {//如果该图片不可见
            return;//不管
        } else {
            othis.attr('src', othis.attr('data-src')).removeAttr('data-src');//可见的时候把占位值替换 并删除占位属性
        }
    });
}
fun();
//$window.scroll(fn).resize(fn);//绑定事件








$(window).bind("scroll",function(){
fun();
    // 判断窗口的滚动条是否接近页面底部
    if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {

$.ajax({
ulr:"../mainpage/default.aspx",
data:"id=1",
dataType:"html",
type:"post",
success:function(data,status){
var ss="";
for(var i=0;i<2;i++)
{
  ss+="<div class='divRow'>";
  for(var j=0;j<4;j++)
  {
    ss+="<a href='../product/product.aspx' target='_blank'><img class='productimg' data-src='../image/051.jpg' src='http://s0.husor.cn/image/blank.png' >"
         +"<div class='divMask'></div>"
                +"<div class='divToolTip'>【包邮】华为荣耀3X</div>"
                +"<div class='divProMsg'>"
                   +"<span class='spanPrice'><b class='bFH'>￥</b><b class='bY'>30</b><b class='bSH'>.99</b></span>"
                   +"<span class='spanCX'><span class='spanCXXX'>5.0折</span> "
                   +"<span class='spanYJ'><strike>￥50.50</strike></span></span><span class='spanQG'>546人已开抢</span>"
                   +"<span class='spanQQG'><b>去抢购</b></span></div></a>";
  }
  ss+="</div>"
}


$(".div_ajax").append(ss);

},
error: function(xmlHttp,status,msg){
$(".div_ajax").html("append");
}
});

html代码：

             <div class="div_ajax">
                           <%for (int i = 0; i < RowCount; i++)
                          { %>
                        <div class="divRow">
                            <%for (int j = 0; j < ColCount; j++)
                              { %>
                            <a href='../product/product.aspx' target='_blank'>
                                <img class='productimg' data-src='../image/05.jpg' src='http://s0.husor.cn/image/blank.png' alt='sadfsafsadff'>
                                <div class='divMask'>
                                </div>
                                <div class='divToolTip'>
                                    【包邮】华为荣耀3X</div>
                                <div class='divProMsg'>
                                    <span class='spanPrice'><b class='bFH'>￥</b> <b class='bY'>30</b> <b class='bSH'>.99</b>
                                    </span><span class='spanCX'><span class='spanCXXX'>5.0折</span> <span class='spanYJ'>
                                        <strike>￥50.50</strike></span> </span><span class='spanQG'>546人已开抢</span> <span class='spanQQG'>
                                            <b>去抢购</b></span>
                                </div>
                            </a>
                            <%} %>
                        </div>
                        <div class='divFGX'>
                        </div>
                        <%} %>
                    </div>

css代码：

.productimg
{ 
    width:100%; 
    height:220px;
    border:0px;
    margin-top:0px;
    position:relative;
    background:url('../image/loading.gif') no-repeat center center; 
}