关于项目中的瀑布流布局...
近年来,瀑布流布局的网站非常流行.
关于瀑布流,我的理解是:参差不齐,却不失美感的图片盛宴!
关于程序设计:给人印象就深刻的就是拉动滚动条快到底部的时候,下面又冒出来一堆图片,直到没有图片,滚动条不能拉动.
数据来源,Ajax异步请求问服务器要json数据(服务器也可以把所有数据返回给前段,一个二维数组(json和数组用法,只是格式不一样),滚动条拉到快底部,取json的键,再把对应键里面的值,也就是图片便利出来,前者用的比较多,这里重点说前者Ajax问服务器要数据)
先准备后台页面data.php
<?php //Ajax请求的时候,带的页数page,即为数组的键0,1,2,3所有对应的值,总页数是已知的 if(isset($_GET['page'])&&$_GET['page']<4){ $a=array ( 0 => array ( 0 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/12109020698951116/T1840AXCpfXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 1 => array ( 'pic_url' => 'http://img04.taobaocdn.com/bao/uploaded/i4/T1_bTyXjBhXXcnKa32_043205.jpg_b.jpg', ), 2 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i3/19373021902175629/T1HaFyXwXcXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 3 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/17434020462585894/T1KKJKXCVdXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 4 => array ( 'pic_url' => 'http://img01.taobaocdn.com/bao/uploaded/i1/T1nn.dXfNeXXbrKu.V_020406.jpg_b.jpg', ), 5 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/10176023070691763/T1KSR0XpNbXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 6 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/14303020297299143/T1iulCXrVeXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 7 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i3/13754020261767042/T1hv4EXDVeXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 8 => array ( 'pic_url' => 'http://img02.taobaocdn.com/bao/uploaded/i2/T1XPPIXb4nXXXT_mba_121932.jpg_b.jpg', ), 9 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/15051033796368437/T1wgRyXxNfXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 10 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/10324022036487840/T1DUBBXpdcXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 11 => array ( 'pic_url' => 'http://img04.taobaocdn.com/bao/uploaded/i4/T10qzMXh4nXXXHY6Q8_071237.jpg_b.jpg', ), ), 1 => array ( 0 => array ( 'pic_url' => 'http://img01.taobaocdn.com/bao/uploaded/i1/T1UY_EXfBpXXbZKBA2_044836.jpg_b.jpg', ), 1 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/19027021598011625/T1_CpoXDhdXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 2 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/15261019999372765/T17FXzXwVbXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 3 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/17033020099207172/T19DBBXE4aXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 4 => array ( 'pic_url' => 'http://img02.taobaocdn.com/bao/uploaded/i2/T1DuYAXndhXXcndeM._111812.jpg_b.jpg', ), 5 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/13232022900847961/T11lpHXrNhXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 6 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/18061020128392914/T1MyVCXvXbXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 7 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/11950021111107294/T18JF0XydcXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 8 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/14748022186051751/T1cnXEXD4cXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 9 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/12582021116055055/T1U8R0XCNbXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 10 => array ( 'pic_url' => 'http://img01.taobaocdn.com/bao/uploaded/i1/T1lBDEXgVnXXcrbO7Y_030056.jpg_b.jpg', ), 11 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/10856023033671767/T1DhFPXwteXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), ), 2 => array ( 0 => array ( 'pic_url' => 'http://img01.taobaocdn.com/bao/uploaded/i1/T1UY_EXfBpXXbZKBA2_044836.jpg_b.jpg', ), 1 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/19027021598011625/T1_CpoXDhdXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 2 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/15261019999372765/T17FXzXwVbXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 3 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/17033020099207172/T19DBBXE4aXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 4 => array ( 'pic_url' => 'http://img02.taobaocdn.com/bao/uploaded/i2/T1DuYAXndhXXcndeM._111812.jpg_b.jpg', ), 5 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/13232022900847961/T11lpHXrNhXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 6 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/18061020128392914/T1MyVCXvXbXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 7 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/11950021111107294/T18JF0XydcXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 8 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/14748022186051751/T1cnXEXD4cXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 9 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/12582021116055055/T1U8R0XCNbXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 10 => array ( 'pic_url' => 'http://img01.taobaocdn.com/bao/uploaded/i1/T1lBDEXgVnXXcrbO7Y_030056.jpg_b.jpg', ), 11 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/10856023033671767/T1DhFPXwteXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), ), 3 => array ( 0 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/15884021160673115/T1Xn01XBBbXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 1 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i1/14207033836280094/T1QCVZXwBXXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 2 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i3/16384021155753422/T1ZHp1XB8dXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 3 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i1/17434033913468404/T1QMJ2XplXXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 4 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/17795020969710297/T13S4SXzlbXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 5 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/19665021151887498/T1Utt0XCheXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 6 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/18212022818523837/T127hSXylcXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 7 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/14600020364207376/T1OC4GXpXgXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 8 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/15056033959660208/T15qNOXAFdXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), 9 => array ( 'pic_url' => 'http://img02.taobaocdn.com/bao/uploaded/i2/T147fMXlRgXXc4wqYb_092829.jpg_b.jpg', ), 10 => array ( 'pic_url' => 'http://img02.taobaocdn.com/bao/uploaded/i2/T1QGSlXkXGXXb3koIV_021916.jpg_b.jpg', ), 11 => array ( 'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/15026022755739917/T19oxSXpRXXXXXXXXX_!!0-item_pic.jpg_b.jpg', ), ) ); echo json_encode($a[$_GET['page']]); }
js文件
var page=0; var is_loading=true; $(document).ready(function(){ loadMore();//页面第一次加载的时候即向服务器请求数据 }); //滚动条事件 $(window).scroll(function(){ //当滚动条距离底部小于200的时候 if ($(document).height()-$(this).scrollTop()-$(this).height()<200) { //page是服务器数据总共有多少页(是已知的)如果小于10页并且加载完毕,就继续请求服务器 if (page<4&&is_loading==true) { loadMore(); } } }); function loadMore(){ is_loading=false; //页面第一次加载时候,不显示"正在加载中..."提示 if(page>0){ $('#is_loading').show(); } $.getJSON('bky.php?page='+page,function(data){ for(i in data){ //瀑布流重点就是图片的高度:如果不知道图片的高,只能根据图片的宽,随机出高并保证图片不能失真 //如果知道图片的宽和高那就好办多了 var sj_height=parseInt(Math.random()*(319-271)+270); var pic=data[i].pic_url; var new_pic=pic.substr(0,pic.lastIndexOf('_'))+'_290x10000.jpg'; //将for in 便利出来的图片依次插入<li></li>标签里面 if(i%2==0){ $('#stage li').eq(0).append("<div><img src='"+new_pic+"' width='290' height='"+sj_height+"'/></div>"); }else{ $('#stage li').eq(1).append("<div><img src='"+new_pic+"' width='290' height='"+sj_height+"'/></div>"); } } //加载完成后,页数累计+1,隐藏提示:由于数据有限,提示效果,不明显 page++; $('#is_loading').hide(); is_loading=true; }); }
html,页面
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>test.html</title> <style type="text/css"> body,div,ul,li{margin:0px;padding:0px;} #picList{width:640px;height:960px;border:1px solid black;} #stage{ margin:0px;padding:0; width:640px;} #stage li{ margin:0;list-style:none;float:left;} #stage li div{ padding:4px; color:#999999;} </style> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="water.js"></script> </head> <body> <div id="picList"> <ul id="stage"> <li></li> <li></li> </ul> <div id="is_loading" style="display:none;position:fixed;bottom:0px;top:auto;font-size:2em;color:gray;">正在加载中...</div> </div> </body> </html>
