又闲来无事,想做个效果,经常看到这种效果,也是最近比较流行的,腾讯做,百度做,很多网站都用,还看过国外的网站是自适应宽屏的,所以想来实现,先来效果图.
总体来说逻辑比较简单,但自己动手还是思考了很久,整个上午都在死胡同里绕来绕去,最终的是用两个数组来定位坐标,一个数组表示第几列,另一数组表示第几列的高度.每增加一张图片,先判断第几列的高度最小,然后把该图片放到这一列最下面,再计算该列的高度.
html代码
View Code 1 2 3 4 5 6 7 8适应宽度的图文排版 9 10 111287 88 89 9013
86- 14
1715
中国新闻周刊: 【巴以今晨3时停火 奥巴马感谢穆尔西斡旋】以色列与巴勒斯坦各武装派别(包括哈马斯)已达成停火协议，协议于北京时间11月22日凌晨3时开始生效。美国白宫随后发表声明称，在巴以双方达成停火协议后，美国总统奥巴马对埃及总统穆尔西的斡旋努力表示了感谢。（中新网） http://url.cn/8p1aHm16- 18
2119
腾讯星座: 【十二星座谁对谁没安全感】第一种:让水瓶男没有安全的魔羯女；第二种:让双鱼男没有安全的水瓶女；第三种:让天秤男没有安全的巨蟹女；第四种:让天蝎男没有安全的双鱼女；第五种:让射手男没有安全的处女女；第六种:让魔羯男没有安全的狮子女。20- 22
2523
雪佛兰: #2013款全新景程金融购车计划# 谁说升级会有距离感？焕然登场的2013款全新景程，依然带着老友般的亲民价格，全系5款车型售价为10.89万至15.19万不等，轻松享受体面！现更有50/50超长贷（15月）金融购车计划，最低首付5.445万即可开回家！即刻报名试驾：http://url.cn/951xif24- 26
2927
情感语录: 你忙，忘了我需要人陪； 你忙，忘了我会寂寞； 你忙，忘了我在等你电话； 你忙，忘了你对我的承诺。 但你知不知道，爱情不是等你有空的时候，再去珍惜的。28- 30
3331
齐鲁晚报: #小齐播新闻#【家长“挤”名校孩子要退学 “名校”虽好并非人人合适】一年半前，托了关系，花了大把力气，好不容易将女儿送进“名校”，可还没毕业，女儿却坚持要转入乡下的普通中学，理由是“这里没有攀比，压力小。”专家建议：名校并非人人合适 “最好”不如“最合适”。http://url.cn/6YcBec32- 34
3735
韩剧网: #《想你》朴有天尹恩惠登场,收视率创新高#摘要：MBC水木电视剧《想你》，由朴有天，尹恩惠，俞承豪等演员登场后，收视率创新高。比起15日7.0%的收视率上升了3.2%，《想你》也进入了10%以上的队伍。《想你》的收视率的急速上升在朴有... 原文：http://url.cn/7UvXwK36- 38
4139
Cx美女粉丝团: #泳装美女#日前，80后性感女星瑞秋·尼科尔斯（Rachel Nichols）公开了一组泳装照，这是她为著名男性杂志《Maxim》拍摄的写真。瑞秋曾在电影《特种部队：眼镜蛇的崛起》（G.I. Joe: Rise of Cobra）有过精彩演出40- 42
4543
陈乔恩星闻: 【9.9包邮】青语蜗牛霜，现代环境污染严重，空气，水，食物的污染，让你与痘痘从此告别，色斑减退了，细纹不见了，干燥、粗糙、暗黄统统都消失了，肌肤宛若出生质感，让女性因你而妒，让世界因你而醉！去抢购>> http://url.cn/4wXPjP44- 46
4947
历史的天空: #历史#拜伦看起来挺有意思的，生活放荡，阅女无数，总盼着得个绝症肺结核，因为他朋友雪莱就得了，那样子看起来忧郁、苍白、柔弱、惹人爱怜。在剑桥念大学读书时，宿舍不让养狗，于是拜伦赌气养了一头熊。48- 50
5351中国新闻周刊: 【巴以今晨3时停火 奥巴马感谢穆尔西斡旋】以色列与巴勒斯坦各武装派别(包括哈马斯)已达成停火协议，协议于北京时间11月22日凌晨3时开始生效。美国白宫随后发表声明称，在巴以双方达成停火协议后，美国总统奥巴马对埃及总统穆尔西的斡旋努力表示了感谢。（中新网） http://url.cn/8p1aHm52- 54
5755腾讯星座: 【十二星座谁对谁没安全感】第一种:让水瓶男没有安全的魔羯女；第二种:让双鱼男没有安全的水瓶女；第三种:让天秤男没有安全的巨蟹女；第四种:让天蝎男没有安全的双鱼女；第五种:让射手男没有安全的处女女；第六种:让魔羯男没有安全的狮子女。56- 58
6159雪佛兰: #2013款全新景程金融购车计划# 谁说升级会有距离感？焕然登场的2013款全新景程，依然带着老友般的亲民价格，全系5款车型售价为10.89万至15.19万不等，轻松享受体面！现更有50/50超长贷（15月）金融购车计划，最低首付5.445万即可开回家！即刻报名试驾：http://url.cn/951xif60- 62
6563情感语录: 你忙，忘了我需要人陪； 你忙，忘了我会寂寞； 你忙，忘了我在等你电话； 你忙，忘了你对我的承诺。 但你知不知道，爱情不是等你有空的时候，再去珍惜的。64- 66
6967齐鲁晚报: #小齐播新闻#【家长“挤”名校孩子要退学 “名校”虽好并非人人合适】一年半前，托了关系，花了大把力气，好不容易将女儿送进“名校”，可还没毕业，女儿却坚持要转入乡下的普通中学，理由是“这里没有攀比，压力小。”专家建议：名校并非人人合适 “最好”不如“最合适”。http://url.cn/6YcBec68- 70
7371韩剧网: #《想你》朴有天尹恩惠登场,收视率创新高#摘要：MBC水木电视剧《想你》，由朴有天，尹恩惠，俞承豪等演员登场后，收视率创新高。比起15日7.0%的收视率上升了3.2%，《想你》也进入了10%以上的队伍。《想你》的收视率的急速上升在朴有... 原文：http://url.cn/7UvXwK72- 74
7775Cx美女粉丝团: #泳装美女#日前，80后性感女星瑞秋·尼科尔斯（Rachel Nichols）公开了一组泳装照，这是她为著名男性杂志《Maxim》拍摄的写真。瑞秋曾在电影《特种部队：眼镜蛇的崛起》（G.I. Joe: Rise of Cobra）有过精彩演出76- 78
8179陈乔恩星闻: 【9.9包邮】青语蜗牛霜，现代环境污染严重，空气，水，食物的污染，让你与痘痘从此告别，色斑减退了，细纹不见了，干燥、粗糙、暗黄统统都消失了，肌肤宛若出生质感，让女性因你而妒，让世界因你而醉！去抢购>> http://url.cn/4wXPjP80- 82
8583历史的天空: #历史#拜伦看起来挺有意思的，生活放荡，阅女无数，总盼着得个绝症肺结核，因为他朋友雪莱就得了，那样子看起来忧郁、苍白、柔弱、惹人爱怜。在剑桥念大学读书时，宿舍不让养狗，于是拜伦赌气养了一头熊。84
循环的是li,里面的代码可以自定义,但要宽度一致.
css代码
1 @charset "utf-8"; 2 /* @Author stealer */ 3 body{ 4 background:#73d0f2; 5 } 6 .graphic{ 7 position:relative; 8 } 9 .graphic li{10 position:absolute;11 border:1px solid #ddd;12 box-shadow:0 1px 2px rgba(0,0,0,0.5);13 background:#fff;14 }15 .graphic li .img{16 margin:10px;17 width:220px;18 }19 .graphic li .img img{20 width:220px;21 }22 .graphic li .desc{23 margin:0 10px 10px;24 width:220px;25 } 没有定义li的宽度和padding值,是为了兼容FF,所以设置的是里面div的宽度.
jquery代码
1 /* @Author stealer */ 2 $(document).ready(function () { 3 var margin=12;//间距 4 var left=margin,top=margin,x=0; 5 var n=parseInt(($(window).width()-margin*3)/($(".graphic li").width()+margin));//适应宽度得到的列数 6 var col=new Array(n-1);//横坐标数组 7 var row=new Array(n-1);//纵坐标数组 8 $(".page").width(n*($(".graphic li").width()+margin)+margin);//居中显示 9 for(var i=0;i row[m]){22 height=row[m];23 x=m;24 }25 }26 left=col[x];27 top=row[x];28 row[x]+=$(".graphic li").eq(i).height()+margin;//新增加一个,高度也增加29 }30 $(".graphic li").eq(i).css({"left":left,"top":top});31 };32 for(var o=0;o 纯手写代码,有逻辑分析不对的地方或者有更好的方法,还望提供,共同进步.