瀑布流:

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。

下面例子用php+mysql+jquery实现了瀑布流布局,实现了大小不一的图片按照一定的规律方式排列。 另外实现了图片延迟加载的功能,点击浏览器下拉滚动条时才加载更多的内容。

本篇博客资源下载:http://download.csdn.net/detail/u011986449/6927589 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(){    //此方法是在滚动条滚动时发生的函数// 当滚动到最底部以上100像素时,加载新内容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();    });//做一个ajax方法来请求data.php不断的获取数据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";   mysql_query($sql,$link);$sql = "set names utf8";mysql_query($sql,$link);$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, 'images/2.jpg', '关爱自己body的同时,千万不要忘记一些小细节,要想让别人爱你,首先先要爱自己。@日本LC品爱 一直是为女生专用护理设计出的牌子,迦沐弹力泡沫是我之前推荐过的迦沐草本皂的升级版,美白效果更明显,泡沫更丰富,能更全面的呵护身体。当然所谓的body也有指“私处”哦。'),
(22, 'images/3.jpg', '只为那一抹清新的绿'),
(23, 'images/4.jpg', '穿好人人都变小细腿儿'),
(24, 'images/5.jpg', '性感蕾丝'),
(25, 'images/6.jpg', '贴身舒适,超级有型。'),
(26, 'images/7.jpg', '我和益若翼~~买过她家假睫毛的请举手'),
(27, 'images/8.jpg', '头发留那么长实属不易,“养”了那么长时间也有感情,但又会对杂志上的QUEEN B QUEEN S的发型馋涎欲滴,我还没有潇洒到减去一头长发,但也会尝试改变下自己,在买的2款假发,一个是发片让头发秘密增多的好武器,一个是梨花头带好立刻变身乖乖女。@花部屋旗舰店'),
(28, 'images/9.jpg', '大头不适合带帽子,我去ZARA/HM买帽子都要带男士的L号的算囊意思, 鞋子是@STACCATO 的 今年就收了她家2双鞋子一双是E嫂设计的靴子一双是毛毛高跟,春天快到了,我要HOT PINK!!!!'),
(29, 'images/10.jpg', '这是在I-DOU收的小西装一件,非常淑女气质,而且很适合OL MM哦,他们网站最近出了很多新款,都是欧美风的,喜欢的看看,不怕撞衫哦。'),
(30, 'images/11.jpg', '自从看了gossip girl后就对这支帅哥美女都用的润唇膏感兴趣,所以一下子收了全部的味道,这是今年最爱的润唇膏,没有之一!打开后就像剥了壳的鸡蛋般润滑,涂在嘴唇上也立刻润色了嘴唇,含维他命而且涂了后一天也不会干,还有防晒指数15哦'),
(31, 'images/12.jpg', '百搭的打底衫,其实是长款哦,但是我配高腰裤穿啦,另外超级便宜诶~~~店主MM搭配的也很好看,大家看下吧'),
(32, 'images/13.jpg', '偶尔瞥了一眼VIVI杂志结果就爱上了这个款式,口袋的毛毛是貉子毛领,摸上去超级柔软啊,冬天很想把脸捂在里面衣服的款式怎么说呢?erm...偏海军风一点啦 所以从阿眯头这里过去的有团购价哦,只要报暗号“阿眯头”就可以享受,有毛领的399,没有毛领的280'),
(33, 'images/14.jpg', '金盏花药膏,这个要特别推荐的原因是,我只要发了痘痘涂好之后第二天痘痘就会变得超级小,第三天就消失了因为我本身不是长痘痘的皮肤,我长痘痘通常都是,通宵了啊,熬夜啦,吃辣吃太多啦,或者月经要来之前才会这样所以长出的痘痘都是有毒性的……摸上去非常疼的那种。'),
(34, 'images/15.jpg', '当时在淘宝上买的时候和另一款去黑眼圈的产品纠结了很久,因为另外一款只要48元,作用也是去黑眼圈+补水,后来仔细看了下成分,一个多了绿茶芦荟,绿茶是很好的抗氧化产品,对排毒啊,消黑眼圈的效果很大的老人不是常说天天喝杯绿茶有助于延缓衰老么,对保护心血管也是有很大的作用。'),
(35, 'images/16.jpg', '自然增高的坡跟靴,让小腿的线条好美丽。'),
(36, 'images/17.jpg', '堂主家的衣服,很喜欢这种帅气的双排扣大衣,版型什么的都很挺括,穿着也显瘦不会冷,冬天就应该有一件这样帅气不失温调的大衣啊 >_<'),
(37, 'images/18.jpg', '还是没有忘记敷面膜,这次推荐的大家肯定喜欢,备受好评的 台湾很多明星推荐来的,我很谨慎的只买了一小包,2礼拜不到就用完了。听我的,好用到一包不够的哦。店家正在搞双12活动,大家可以去看看。'),
(38, 'images/19.jpg', '翻出前阵子大广角镜头翻出的照片 腿肿么能拉的那么长 朋友推荐我去参加评选 就拿这张去报名吧,每周送出HTC CHACHA 手机一台'),
(39, 'images/20.jpg', '看上去不起眼儿的T型罐子,一开始body silk深深的吸引了我,非常2B的把SLIK看成了MILK,心想牛奶涂身体上肯定滋润,但是silk比milk还要强大其实,身体如丝绸般滋润有木有。'),
(40, 'images/2.jpg', '关爱自己body的同时,千万不要忘记一些小细节,要想让别人爱你,首先先要爱自己。@日本LC品爱 一直是为女生专用护理设计出的牌子,迦沐弹力泡沫是我之前推荐过的迦沐草本皂的升级版,美白效果更明显,泡沫更丰富,能更全面的呵护身体。当然所谓的body也有指“私处”哦。'),
(41, 'images/3.jpg', '只为那一抹清新的绿'),
(42, 'images/4.jpg', '穿好人人都变小细腿儿'),
(43, 'images/5.jpg', '性感蕾丝'),
(44, 'images/6.jpg', '贴身舒适,超级有型。'),
(45, 'images/7.jpg', '我和益若翼~~买过她家假睫毛的请举手'),
(46, 'images/8.jpg', '头发留那么长实属不易,“养”了那么长时间也有感情,但又会对杂志上的QUEEN B QUEEN S的发型馋涎欲滴,我还没有潇洒到减去一头长发,但也会尝试改变下自己,在买的2款假发,一个是发片让头发秘密增多的好武器,一个是梨花头带好立刻变身乖乖女。@花部屋旗舰店'),
(47, 'images/9.jpg', '大头不适合带帽子,我去ZARA/HM买帽子都要带男士的L号的算囊意思, 鞋子是@STACCATO 的 今年就收了她家2双鞋子一双是E嫂设计的靴子一双是毛毛高跟,春天快到了,我要HOT PINK!!!!'),
(48, 'images/10.jpg', '这是在I-DOU收的小西装一件,非常淑女气质,而且很适合OL MM哦,他们网站最近出了很多新款,都是欧美风的,喜欢的看看,不怕撞衫哦。'),
(49, 'images/11.jpg', '自从看了gossip girl后就对这支帅哥美女都用的润唇膏感兴趣,所以一下子收了全部的味道,这是今年最爱的润唇膏,没有之一!打开后就像剥了壳的鸡蛋般润滑,涂在嘴唇上也立刻润色了嘴唇,含维他命而且涂了后一天也不会干,还有防晒指数15哦'),
(50, 'images/12.jpg', '百搭的打底衫,其实是长款哦,但是我配高腰裤穿啦,另外超级便宜诶~~~店主MM搭配的也很好看,大家看下吧'),
(51, 'images/13.jpg', '偶尔瞥了一眼VIVI杂志结果就爱上了这个款式,口袋的毛毛是貉子毛领,摸上去超级柔软啊,冬天很想把脸捂在里面衣服的款式怎么说呢?erm...偏海军风一点啦 所以从阿眯头这里过去的有团购价哦,只要报暗号“阿眯头”就可以享受,有毛领的399,没有毛领的280'),
(52, 'images/14.jpg', '金盏花药膏,这个要特别推荐的原因是,我只要发了痘痘涂好之后第二天痘痘就会变得超级小,第三天就消失了因为我本身不是长痘痘的皮肤,我长痘痘通常都是,通宵了啊,熬夜啦,吃辣吃太多啦,或者月经要来之前才会这样所以长出的痘痘都是有毒性的……摸上去非常疼的那种。'),
(53, 'images/15.jpg', '当时在淘宝上买的时候和另一款去黑眼圈的产品纠结了很久,因为另外一款只要48元,作用也是去黑眼圈+补水,后来仔细看了下成分,一个多了绿茶芦荟,绿茶是很好的抗氧化产品,对排毒啊,消黑眼圈的效果很大的老人不是常说天天喝杯绿茶有助于延缓衰老么,对保护心血管也是有很大的作用。'),
(54, 'images/16.jpg', '自然增高的坡跟靴,让小腿的线条好美丽。'),
(55, 'images/17.jpg', '堂主家的衣服,很喜欢这种帅气的双排扣大衣,版型什么的都很挺括,穿着也显瘦不会冷,冬天就应该有一件这样帅气不失温调的大衣啊 >_<'),
(56, 'images/18.jpg', '还是没有忘记敷面膜,这次推荐的大家肯定喜欢,备受好评的 台湾很多明星推荐来的,我很谨慎的只买了一小包,2礼拜不到就用完了。听我的,好用到一包不够的哦。店家正在搞双12活动,大家可以去看看。'),
(57, 'images/19.jpg', '翻出前阵子大广角镜头翻出的照片 腿肿么能拉的那么长 朋友推荐我去参加评选 就拿这张去报名吧,每周送出HTC CHACHA 手机一台'),
(58, 'images/20.jpg', '看上去不起眼儿的T型罐子,一开始body silk深深的吸引了我,非常2B的把SLIK看成了MILK,心想牛奶涂身体上肯定滋润,但是silk比milk还要强大其实,身体如丝绸般滋润有木有。'),
(59, 'images/2.jpg', '关爱自己body的同时,千万不要忘记一些小细节,要想让别人爱你,首先先要爱自己。@日本LC品爱 一直是为女生专用护理设计出的牌子,迦沐弹力泡沫是我之前推荐过的迦沐草本皂的升级版,美白效果更明显,泡沫更丰富,能更全面的呵护身体。当然所谓的body也有指“私处”哦。'),
(60, 'images/3.jpg', '只为那一抹清新的绿'),
(61, 'images/4.jpg', '穿好人人都变小细腿儿'),
(62, 'images/5.jpg', '性感蕾丝'),
(63, 'images/6.jpg', '贴身舒适,超级有型。'),
(64, 'images/7.jpg', '我和益若翼~~买过她家假睫毛的请举手'),
(65, 'images/8.jpg', '头发留那么长实属不易,“养”了那么长时间也有感情,但又会对杂志上的QUEEN B QUEEN S的发型馋涎欲滴,我还没有潇洒到减去一头长发,但也会尝试改变下自己,在买的2款假发,一个是发片让头发秘密增多的好武器,一个是梨花头带好立刻变身乖乖女。@花部屋旗舰店'),
(66, 'images/9.jpg', '大头不适合带帽子,我去ZARA/HM买帽子都要带男士的L号的算囊意思, 鞋子是@STACCATO 的 今年就收了她家2双鞋子一双是E嫂设计的靴子一双是毛毛高跟,春天快到了,我要HOT PINK!!!!'),
(67, 'images/10.jpg', '这是在I-DOU收的小西装一件,非常淑女气质,而且很适合OL MM哦,他们网站最近出了很多新款,都是欧美风的,喜欢的看看,不怕撞衫哦。'),
(68, 'images/11.jpg', '自从看了gossip girl后就对这支帅哥美女都用的润唇膏感兴趣,所以一下子收了全部的味道,这是今年最爱的润唇膏,没有之一!打开后就像剥了壳的鸡蛋般润滑,涂在嘴唇上也立刻润色了嘴唇,含维他命而且涂了后一天也不会干,还有防晒指数15哦'),
(69, 'images/12.jpg', '百搭的打底衫,其实是长款哦,但是我配高腰裤穿啦,另外超级便宜诶~~~店主MM搭配的也很好看,大家看下吧'),
(70, 'images/13.jpg', '偶尔瞥了一眼VIVI杂志结果就爱上了这个款式,口袋的毛毛是貉子毛领,摸上去超级柔软啊,冬天很想把脸捂在里面衣服的款式怎么说呢?erm...偏海军风一点啦 所以从阿眯头这里过去的有团购价哦,只要报暗号“阿眯头”就可以享受,有毛领的399,没有毛领的280'),
(71, 'images/14.jpg', '金盏花药膏,这个要特别推荐的原因是,我只要发了痘痘涂好之后第二天痘痘就会变得超级小,第三天就消失了因为我本身不是长痘痘的皮肤,我长痘痘通常都是,通宵了啊,熬夜啦,吃辣吃太多啦,或者月经要来之前才会这样所以长出的痘痘都是有毒性的……摸上去非常疼的那种。'),
(72, 'images/15.jpg', '当时在淘宝上买的时候和另一款去黑眼圈的产品纠结了很久,因为另外一款只要48元,作用也是去黑眼圈+补水,后来仔细看了下成分,一个多了绿茶芦荟,绿茶是很好的抗氧化产品,对排毒啊,消黑眼圈的效果很大的老人不是常说天天喝杯绿茶有助于延缓衰老么,对保护心血管也是有很大的作用。'),
(73, 'images/16.jpg', '自然增高的坡跟靴,让小腿的线条好美丽。'),
(74, 'images/17.jpg', '堂主家的衣服,很喜欢这种帅气的双排扣大衣,版型什么的都很挺括,穿着也显瘦不会冷,冬天就应该有一件这样帅气不失温调的大衣啊 >_<'),
(75, 'images/18.jpg', '还是没有忘记敷面膜,这次推荐的大家肯定喜欢,备受好评的 台湾很多明星推荐来的,我很谨慎的只买了一小包,2礼拜不到就用完了。听我的,好用到一包不够的哦。店家正在搞双12活动,大家可以去看看。'),
(76, 'images/19.jpg', '翻出前阵子大广角镜头翻出的照片 腿肿么能拉的那么长 朋友推荐我去参加评选 就拿这张去报名吧,每周送出HTC CHACHA 手机一台'),
(77, 'images/20.jpg', '看上去不起眼儿的T型罐子,一开始body silk深深的吸引了我,非常2B的把SLIK看成了MILK,心想牛奶涂身体上肯定滋润,但是silk比milk还要强大其实,身体如丝绸般滋润有木有。'),
(78, 'images/2.jpg', '关爱自己body的同时,千万不要忘记一些小细节,要想让别人爱你,首先先要爱自己。@日本LC品爱 一直是为女生专用护理设计出的牌子,迦沐弹力泡沫是我之前推荐过的迦沐草本皂的升级版,美白效果更明显,泡沫更丰富,能更全面的呵护身体。当然所谓的body也有指“私处”哦。'),
(79, 'images/3.jpg', '只为那一抹清新的绿'),
(80, 'images/4.jpg', '穿好人人都变小细腿儿'),
(81, 'images/5.jpg', '性感蕾丝'),
(82, 'images/6.jpg', '贴身舒适,超级有型。'),
(83, 'images/7.jpg', '我和益若翼~~买过她家假睫毛的请举手'),
(84, 'images/8.jpg', '头发留那么长实属不易,“养”了那么长时间也有感情,但又会对杂志上的QUEEN B QUEEN S的发型馋涎欲滴,我还没有潇洒到减去一头长发,但也会尝试改变下自己,在买的2款假发,一个是发片让头发秘密增多的好武器,一个是梨花头带好立刻变身乖乖女。@花部屋旗舰店'),
(85, 'images/9.jpg', '大头不适合带帽子,我去ZARA/HM买帽子都要带男士的L号的算囊意思, 鞋子是@STACCATO 的 今年就收了她家2双鞋子一双是E嫂设计的靴子一双是毛毛高跟,春天快到了,我要HOT PINK!!!!'),
(86, 'images/10.jpg', '这是在I-DOU收的小西装一件,非常淑女气质,而且很适合OL MM哦,他们网站最近出了很多新款,都是欧美风的,喜欢的看看,不怕撞衫哦。'),
(87, 'images/11.jpg', '自从看了gossip girl后就对这支帅哥美女都用的润唇膏感兴趣,所以一下子收了全部的味道,这是今年最爱的润唇膏,没有之一!打开后就像剥了壳的鸡蛋般润滑,涂在嘴唇上也立刻润色了嘴唇,含维他命而且涂了后一天也不会干,还有防晒指数15哦'),
(88, 'images/12.jpg', '百搭的打底衫,其实是长款哦,但是我配高腰裤穿啦,另外超级便宜诶~~~店主MM搭配的也很好看,大家看下吧'),
(89, 'images/13.jpg', '偶尔瞥了一眼VIVI杂志结果就爱上了这个款式,口袋的毛毛是貉子毛领,摸上去超级柔软啊,冬天很想把脸捂在里面衣服的款式怎么说呢?erm...偏海军风一点啦 所以从阿眯头这里过去的有团购价哦,只要报暗号“阿眯头”就可以享受,有毛领的399,没有毛领的280'),
(90, 'images/14.jpg', '金盏花药膏,这个要特别推荐的原因是,我只要发了痘痘涂好之后第二天痘痘就会变得超级小,第三天就消失了因为我本身不是长痘痘的皮肤,我长痘痘通常都是,通宵了啊,熬夜啦,吃辣吃太多啦,或者月经要来之前才会这样所以长出的痘痘都是有毒性的……摸上去非常疼的那种。'),
(91, 'images/15.jpg', '当时在淘宝上买的时候和另一款去黑眼圈的产品纠结了很久,因为另外一款只要48元,作用也是去黑眼圈+补水,后来仔细看了下成分,一个多了绿茶芦荟,绿茶是很好的抗氧化产品,对排毒啊,消黑眼圈的效果很大的老人不是常说天天喝杯绿茶有助于延缓衰老么,对保护心血管也是有很大的作用。'),
(92, 'images/16.jpg', '自然增高的坡跟靴,让小腿的线条好美丽。'),
(93, 'images/17.jpg', '堂主家的衣服,很喜欢这种帅气的双排扣大衣,版型什么的都很挺括,穿着也显瘦不会冷,冬天就应该有一件这样帅气不失温调的大衣啊 >_<'),
(94, 'images/18.jpg', '还是没有忘记敷面膜,这次推荐的大家肯定喜欢,备受好评的 台湾很多明星推荐来的,我很谨慎的只买了一小包,2礼拜不到就用完了。听我的,好用到一包不够的哦。店家正在搞双12活动,大家可以去看看。'),
(95, 'images/19.jpg', '翻出前阵子大广角镜头翻出的照片 腿肿么能拉的那么长 朋友推荐我去参加评选 就拿这张去报名吧,每周送出HTC CHACHA 手机一台'),
(96, 'images/20.jpg', '看上去不起眼儿的T型罐子,一开始body silk深深的吸引了我,非常2B的把SLIK看成了MILK,心想牛奶涂身体上肯定滋润,但是silk比milk还要强大其实,身体如丝绸般滋润有木有。');

php+mysql+jquery瀑布流相关推荐

  1. html流式布局插件,Jquery瀑布流网格布局插件

    插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...

  2. jquery 瀑布流实例最流行瀑布流图片展示

    jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示.用户可以无限浏览图片或内容无限加载瀑布流 ...

  3. 写了个jquery瀑布流插件 , 求各位道友猛男指点指点

    如题 ,请各位大佬指点一下 ;;(function(){if(typeof jQuery === "function"){(function( factory , $ ){if($ ...

  4. jq.ajax+php+mysql实现瀑布流缓冲加载数据

    效果图如下: html+css代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...

  5. PHP jquery瀑布流特效源码

    PHP jquery实现瀑布流布局,其实一个核心的原理是,当滚动到最底部以上100像素时, 加载新内容.为了保证大家能够充分理解瀑布流的实现原理,就尽量保证了实例的简单性,这款瀑布流仅仅使用了php数 ...

  6. ajax瀑布流插件,jQuery瀑布流无限加载插件:jquery.falless.js

    慌慌张张,匆匆忙忙,为何生活总是这样? 难道说,我的理想,就是这样度过一生的时光?........... 真的是一年一年飞逝而去,而人的一生,又有几个一年? 第一个四年即将结束,得到了什么?又失去了什 ...

  7. Jquery瀑布流插件wookmark

    瀑布流布局在现在的网页设计里面可谓是相当的流行的,从网页到手机应用,都能见到瀑布流的身影.相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的 ...

  8. jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果

    效果图: <!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8& ...

  9. jQuery 瀑布流插件: Wookmark

    原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网:  http://www.wookmark.com/jquery-plugin ...

  10. JQuery实现照片瀑布流

    JQuery实现照片瀑布流 摘要:总所周知,百度搜图结果下拉会越来越多自动呈现,成为瀑布流.想要打造类似百度图片搜索的瀑布流不是困难的事情,通过javascript也能实现只是实现的比较麻烦,通过jq ...

最新文章

  1. volatile和final
  2. SpringSecurity 权限控制之开启动态权限注解支持
  3. ElasticSearch查询 第四篇:匹配查询(Match)
  4. 【题解】 P2151 [SDOI2009]HH去散步
  5. SAP Spartacus B2B Popover Directive 和 Popover Component 的生命周期管理
  6. Visual Studio 2019 首个预览版本抢先看,有啥新功能?
  7. C++重载IO操作符
  8. viewpager的优化
  9. 用hosts屏蔽不想打开的或者恶意的网站
  10. iOS键盘遮挡输入框,输入区域自动上移
  11. hdu 5144 NPY and shot(三分)
  12. 全连接层和卷积层最终应用在网络上的不同之处
  13. 关于iphone中微信无法调用百度api的解决方案
  14. 软件测试基础知识思维导图,测试基础思维导图.pdf
  15. html自动弹图片,JS自动适应的图片弹窗实例
  16. 中国LVDT RVDT传感器市场现状研究分析与发展前景预测报告(2022)
  17. 【Pandas】一文入门Pandas处理csv文件数据集(神经网络/机器学习算法数据预处理)
  18. html 边框重叠问题,详解css边距重叠的几种解决方案
  19. mc通用计算机,《我的世界》里打造一台计算机有多难?复旦大神花一年终于实现!...
  20. 数字华容道java_从零开发HarmonyOS(鸿蒙)手机小游戏——数字华容道

热门文章

  1. 缠中说禅:缠非缠、禅非禅,枯木龙吟照大千(整理版)
  2. (二十一) Sed编辑器高级部分
  3. 计算机如何建立小型服务器,如何将个人PC搭建成小型服务器
  4. vue实现完整的购物车功能(包括单选全选,删除商品和结算商品功能)
  5. Excel 公式CORREL算出相关系数
  6. 机器学习案例之_金融反欺诈预测
  7. C++基础之detele和detele[]
  8. 人生感悟:欲望适度则为利,欲望过度则为害
  9. 合成孔径雷达影像(SAR图像)变化检测深度学习研究方法
  10. html如何使文本自动换行,html 文本自动换行