<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流</title>
<style>
*{
margin: 0;
padding: 0;
border: none;
outline: none;
}
.box{
position: relative;
width: 1000px;
margin: 0 auto;
}
img{
position: absolute;
width: 192px;
overflow: hidden;
height: 250px;
}
.btn{
height: 50px;
width: 200px;
display: block;
text-align: center;
margin: 20px auto;
}
</style>
<script src="js/template-web.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="box">
</div>
<button class="btn">玩命加载中……</button>
<script type="text/template" id="tpl">
{{each items}}
<img src="http://120.78.90.148:82/{{$value.path}}" style="height:{{$value.height}}px" />
{{/each}}
</script>
<script>
$.fn.waterfall=function(cols){
var parent=$(this);
var items=parent.children();
var $items=$(items);
var itemsWidth=$items.width();
var x=(parent.width()-itemsWidth*cols)/(cols-1);
var y=20;
var arr=[];
for(var i=0;i<cols;i++){
arr[i]=0;
}
var index=0;
for(var i=0;i<items.length;i++){
var $i=$(items[i]);
var min=arr[0];
var index=0;
for(var j=0;j<cols;j++){
if(min>arr[j]){
min=arr[j];
index=j;
}
}
if(arr[index]==0){
$i.css({"top":(arr[index]+y)+"px","left":(index*itemsWidth+x*index)+"px"});
}else{
$i.css({"top":(arr[index]+y)+"px","left":(index*itemsWidth+x*index)+"px"});
}
arr[index]+=parseInt($i.height()+y);
}
var max=arr[0];
for(var i=0;i<cols;i++){
if(max<arr[i]){
max=arr[i];
}
}
$(this).css("height",max+"px");
}
var page=1;
function getData(){
$.ajax({
"type":"get",
"dataType":"jsonp",
"url":"http://120.78.90.148",
"data":"page="+page+"&pageSize=10",
"beforeSend":function(){
if($(".btn").html()=="玩命加载中……"){
page--;
return;
}
$(".btn").html("玩命加载中……");
},
"success":function(data){
if(data.length==0){
$(".btn").html("没有更多数据了……");
return;
}
var html=template("tpl",{items:data});
$(".box").append(html);
$(".box").waterfall(5);
$(".btn").html("点击加载更多……");
}
})
}
getData();
$(".btn").click(function(){
page++;
getData();
});
$(window).scroll(function(){
console.log(parseInt($(".box").height())-$(window).scrollTop());
if((parseInt($(".box").height())-$(window).scrollTop())<500){
page++;
getData();
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流</title>
<style>
*{
margin: 0;
padding: 0;
border: none;
outline: none;
}
.box{
position: relative;
width: 1000px;
margin: 0 auto;
}
img{
position: absolute;
width: 192px;
overflow: hidden;
height: 250px;
}
.btn{
height: 50px;
width: 200px;
display: block;
text-align: center;
margin: 20px auto;
}
</style>
<script src="js/template-web.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="box">
</div>
<button class="btn">玩命加载中……</button>
<script type="text/template" id="tpl">
{{each items}}
<img src="http://120.78.90.148:82/{{$value.path}}" style="height:{{$value.height}}px" />
{{/each}}
</script>
<script>
$.fn.waterfall=function(cols){
var parent=$(this);
var items=parent.children();
var $items=$(items);
var itemsWidth=$items.width();
var x=(parent.width()-itemsWidth*cols)/(cols-1);
var y=20;
var arr=[];
for(var i=0;i<cols;i++){
arr[i]=0;
}
var index=0;
for(var i=0;i<items.length;i++){
var $i=$(items[i]);
var min=arr[0];
var index=0;
for(var j=0;j<cols;j++){
if(min>arr[j]){
min=arr[j];
index=j;
}
}
if(arr[index]==0){
$i.css({"top":(arr[index]+y)+"px","left":(index*itemsWidth+x*index)+"px"});
}else{
$i.css({"top":(arr[index]+y)+"px","left":(index*itemsWidth+x*index)+"px"});
}
arr[index]+=parseInt($i.height()+y);
}
var max=arr[0];
for(var i=0;i<cols;i++){
if(max<arr[i]){
max=arr[i];
}
}
$(this).css("height",max+"px");
}
var page=1;
function getData(){
$.ajax({
"type":"get",
"dataType":"jsonp",
"url":"http://120.78.90.148",
"data":"page="+page+"&pageSize=10",
"beforeSend":function(){
if($(".btn").html()=="玩命加载中……"){
page--;
return;
}
$(".btn").html("玩命加载中……");
},
"success":function(data){
if(data.length==0){
$(".btn").html("没有更多数据了……");
return;
}
var html=template("tpl",{items:data});
$(".box").append(html);
$(".box").waterfall(5);
$(".btn").html("点击加载更多……");
}
})
}
getData();
$(".btn").click(function(){
page++;
getData();
});
$(window).scroll(function(){
console.log(parseInt($(".box").height())-$(window).scrollTop());
if((parseInt($(".box").height())-$(window).scrollTop())<500){
page++;
getData();
}
});
</script>
</body>
</html>