无刷新瀑布流

标签：

<ul class="shangpin clearfix col">

<li class="pin_1">

<a href="javascript:;" class="tupn">
<img src="img/diceaseguide.jpg">
</a>
<div class="tupn_2">
<a class="spmc" href="javascript:;">啦啦啦啦啦</a>
<span class="spjg">￥1380.00</span>
</div>
<div class="tupn_3">
<div class="tupn_31">
<p class="pn_1">
<span>厂家直销</span>
</p>
<p class="pn_2">
<span>总销售</span>
<i>79</i>
<img src="img/yk_147.jpg">
<i>16</i>
</p>
</div>
<div class="tupn_32">
<i class="jian">-</i>
<input type="text" class="shu" value="1">
<b class="jia">+</b>
</div>
<a class="tupn_4" href="javascript:;">加入购物车</a>
</div>
</li>
</ul>
<script>

$(‘.wolzhuan‘).on(‘mouseover‘,‘.tupn_4‘,function() {
this.style.background= "#fff";
this.style.color = "#00b0fb";
})
$(‘.wolzhuan‘).on(‘mouseout‘,‘.tupn_4‘,function(){
this.style.background= "#00b0fb";
this.style.color = "#fff";
});
</script>
</div>
<a href="javascript:;" class="btnd" style="display:blick;">加载更多</a>
</div>
<script type="text/javascript">
$(function(){
//url data function dataType
function loadMeinv(){
//var data = 0;
for(var i=0;i<15;i++){//每次加载时模拟随机加载图片
//data = parseInt(Math.random()*9);
var html = "";
html = "<li class=‘pin_1‘>"+
"<a href=‘javascript:;‘ class=‘tupn‘>"+
"<img src=‘img/diceaseguide.jpg‘>"+
"</a>"+
"<div class=‘tupn_2‘>"+
"<a class=‘spmc‘ href=‘javascript:;‘>啦啦啦啦啦</a>"+
"<span class=‘spjg‘>￥1380.00</span>"+
"</div>"+
"<div class=‘tupn_3‘>"+
"<div class=‘tupn_31‘>"+
"<p class=‘pn_1‘>"+
"<span>厂家直销</span>"+
"</p>"+
"<p class=‘pn_2‘>"+
"<span>总销售</span>"+
"<i>79</i>"+
"<img src=‘img/yk_147.jpg‘>"+
"<i>16</i>"+
"</p>"+
"</div>"+
"<div class=‘tupn_32‘>"+
"<i class=‘jian‘>-</i>"+
"<input type=‘text‘ class=‘shu‘ value=‘1‘>"+
"<b class=‘jia‘>+</b>"+
"</div>"+
"<a class=‘tupn_4‘ href=‘javascript:;‘>加入购物车</a>"+
"</div>"+
"</li>";
$minUl = getMinUl();
$minUl.append(html);
}
}
//loadMeinv();
$(‘.btnd‘).on(‘click‘,function(){
$minUl = getMinUl();
if($minUl.height() <= $(window).scrollTop()+$(window).height()){
//当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
loadMeinv();
}
});
function getMinUl(){//每次获取最短的ul,将图片放到其后
var $arrUl = $("#container .col");
var $minUl =$arrUl.eq(0);
$arrUl.each(function(index,elem){
if($(elem).height()<$minUl.height()){
$minUl = $(elem);
}
});
return $minUl;
}
})
</script>

无刷新瀑布流

标签：

原文地址：http://www.cnblogs.com/lichenxu/p/5420261.html