瀑布流：
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
下面例子用PHP+MysqL+jQuery实现了瀑布流布局，实现了大小不一的图片按照一定的规律方式排列。 另外实现了图片延迟加载的功能，点击浏览器下拉滚动条时才加载更多的内容。
效果如下：
index.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>瀑布流-NiceGY</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="waterfall.css" />
<script type="text/javascript" language="javascript" src="waterfall.js"></script>
<style>
body{text-align:center;}
#stage{ margin:0 auto; padding:0; width:880px; }
#stage li{ margin:0; padding:0; list-style:none;float:left; width:220px;}
#stage li div{ font-size:12px; padding:10px; color:#999999; text-align:left; }
</style>
</head>
<body>
<ul id="stage">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
waterfall.js
/*
* Javascript文件：waterfall.js
*/
$(function(){
jsonajax();
});
//这里就要进行计算滚动条当前所在的位置了。如果滚动条离最底部还有100px的时候就要进行调用ajax加载数据
$(window).scroll(function(){
var $doc_height,$s_top,$Now_height;
$doc_height = $(document).height(); //这里是document的整个高度
$s_top = $(this).scrollTop(); //当前滚动条离最顶上多少高度
$Now_height = $(this).height(); //这里的this 也是就是window对象
if(($doc_height - $s_top - $Now_height) < 100) jsonajax();
});
var $num = 0;
function jsonajax(){
$.ajax({
url:'data.PHP',
type:'POST',
data:"num="+$num++,
dataType:'json',
success:function(json){
if(typeof json == 'object'){
var neirou,$row,iheight,temp_h;
for(var i=0,l=json.length;i<l;i++){
neirou = json[i]; //当前层数据
iheight = -1;
$("#stage li").each(function(){
//得到当前li的高度
temp_h = Number($(this).height());
if(iheight == -1 || iheight >temp_h){
iheight = temp_h;
$row = $(this); //此时$row是li对象了
}
});
$item = $('<div><img src="'+neirou.img+'" border="0" ><br/>'+neirou.title+'</div>').hide();
$row.append($item);
$item.fadeIn();
}
}
}
});
}
data.PHP
<?PHP
$link = MysqL_connect("localhost","root",""); //连接数据库
$sql = "use content";
$sql = "set names utf8";
$num = $_POST['num'] *10;
if($_POST['num'] != 0) $num +1;
$sql = "select img,title from content limit ".$num.",10";
$result = MysqL_query($sql,$link);
$temp_arr = array();
while($row = MysqL_fetch_assoc($result)){
$temp_arr[] = $row;
}
$json_arr = array();
foreach($temp_arr as $k=>$v){
$json_arr[] = (object)$v;
}
echo json_encode( $json_arr );
?>
waterfall.sql
--
-- 表的结构 `content`
--
CREATE TABLE `content` (
`id` smallint(6) unsigned NOT NULL auto_increment,
`img` char(20) NOT NULL,
`title` varchar(300) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
插入数据：
INSERT INTO `content` (`id`,`img`,`title`) VALUES
(1,'images/1.jpg','可爱与性感集于一身 来自韩国的荷叶边复古连衣裙'),
(2,'images/2.jpg','关爱自己body的同时，千万不要忘记一些小细节，要想让别人爱你，首先先要爱自己。@日本LC品爱 一直是为女生专用护理设计出的牌子，迦沐弹力泡沫是我之前推荐过的迦沐草本皂的升级版，美白效果更明显，泡沫更丰富，能更全面的呵护身体。当然所谓的body也有指“私处”哦。'),
(3,'images/3.jpg','只为那一抹清新的绿'),
(4,'images/4.jpg','穿好人人都变小细腿儿'),
(5,'images/5.jpg','性感蕾丝'),
(6,'images/6.jpg','贴身舒适，超级有型。'),
(7,'images/7.jpg','我和益若翼~~买过她家假睫毛的请举手'),
(8,'images/8.jpg','头发留那么长实属不易，“养”了那么长时间也有感情，但又会对杂志上的QUEEN B QUEEN S的发型馋涎欲滴，我还没有潇洒到减去一头长发，但也会尝试改变下自己，在买的2款假发，一个是发片让头发秘密增多的好武器，一个是梨花头带好立刻变身乖乖女。@花部屋旗舰店'),
(9,'images/9.jpg','大头不适合带帽子,我去Zara/HM买帽子都要带男士的L号的算囊意思,鞋子是@STACCATO 的 今年就收了她家2双鞋子一双是E嫂设计的靴子一双是毛毛高跟，春天快到了，我要HOT PINK!!!!'),
(10,'images/10.jpg','这是在I-DOU收的小西装一件，非常淑女气质，而且很适合OL MM哦，他们网站最近出了很多新款，都是欧美风的，喜欢的看看，不怕撞衫哦。'),
(11,'images/11.jpg','自从看了gossip girl后就对这支帅哥美女都用的润唇膏感兴趣，所以一下子收了全部的味道，这是今年最爱的润唇膏，没有之一！打开后就像剥了壳的鸡蛋般润滑，涂在嘴唇上也立刻润色了嘴唇，含维他命而且涂了后一天也不会干，还有防晒指数15哦'),
(12,'images/12.jpg','百搭的打底衫，其实是长款哦，但是我配高腰裤穿啦，另外超级便宜诶~~~店主MM搭配的也很好看，大家看下吧'),
(13,'images/13.jpg','偶尔瞥了一眼VIVI杂志结果就爱上了这个款式，口袋的毛毛是貉子毛领，摸上去超级柔软啊，冬天很想把脸捂在里面衣服的款式怎么说呢？erm...偏海军风一点啦 所以从阿眯头这里过去的有团购价哦，只要报暗号“阿眯头”就可以享受，有毛领的399，没有毛领的280'),
(14,'images/14.jpg','金盏花药膏，这个要特别推荐的原因是，我只要发了痘痘涂好之后第二天痘痘就会变得超级小，第三天就消失了因为我本身不是长痘痘的皮肤，我长痘痘通常都是，通宵了啊，熬夜啦，吃辣吃太多啦，或者月经要来之前才会这样所以长出的痘痘都是有毒性的……摸上去非常疼的那种。'),
(15,'images/15.jpg','当时在淘宝上买的时候和另一款去黑眼圈的产品纠结了很久，因为另外一款只要48元，作用也是去黑眼圈+补水，后来仔细看了下成分，一个多了绿茶芦荟，绿茶是很好的抗氧化产品，对排毒啊，消黑眼圈的效果很大的老人不是常说天天喝杯绿茶有助于延缓衰老么，对保护心血管也是有很大的作用。'),
(16,'images/16.jpg','自然增高的坡跟靴，让小腿的线条好美丽。'),
(17,'images/17.jpg','堂主家的衣服，很喜欢这种帅气的双排扣大衣，版型什么的都很挺括，穿着也显瘦不会冷，冬天就应该有一件这样帅气不失温调的大衣啊 >_<'),
(18,'images/18.jpg','还是没有忘记敷面膜，这次推荐的大家肯定喜欢，备受好评的 台湾很多明星推荐来的，我很谨慎的只买了一小包，2礼拜不到就用完了。听我的，好用到一包不够的哦。店家正在搞双12活动，大家可以去看看。'),
(19,'images/19.jpg','翻出前阵子大广角镜头翻出的照片 腿肿么能拉的那么长 朋友推荐我去参加评选 就拿这张去报名吧，每周送出HTC CHACHA 手机一台'),
(20,'images/20.jpg','看上去不起眼儿的T型罐子，一开始body silk深深的吸引了我，非常2B的把SLIK看成了MILK，心想牛奶涂身体上肯定滋润，但是silk比milk还要强大其实，身体如丝绸般滋润有木有。'),
(21,
(22,
(23,
(24,
(25,
(26,
(27,
(28,
(29,
(30,
(31,
(32,
(33,
(34,
(35,
(36,
(37,
(38,
(39,
(40,
(41,
(42,
(43,
(44,
(45,
(46,
(47,
(48,
(49,
(50,
(51,
(52,
(53,
(54,
(55,
(56,
(57,
(58,
(59,
(60,
(61,
(62,
(63,
(64,
(65,
(66,
(67,
(68,
(69,
(70,
(71,
(72,
(73,
(74,
(75,
(76,
(77,
(78,
(79,
(80,
(81,
(82,
(83,
(84,
(85,
(86,
(87,
(88,
(89,
(90,
(91,
(92,
(93,
(94,
(95,
(96,'看上去不起眼儿的T型罐子，一开始body silk深深的吸引了我，非常2B的把SLIK看成了MILK，心想牛奶涂身体上肯定滋润，但是silk比milk还要强大其实，身体如丝绸般滋润有木有。');
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
