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