类似百度图片排版效果
<div id="cnblogs_post_body">又闲来无事,想做个效果,经常看到这种效果,也是最近比较流行的,腾讯做,百度做,很多网站都用,还看过国外的网站是自适应宽屏的,所以想来实现,先来效果图.http://pic002.cnblogs.com/images/2012/366813/2012112218442942.jpg
总体来说逻辑比较简单,但自己动手还是思考了很久,整个上午都在死胡同里绕来绕去,最终的是用两个数组来定位坐标,一个数组表示第几列,另一数组表示第几列的高度.每增加一张图片,先判断第几列的高度最小,然后把该图片放到这一列最下面,再计算该列的高度.
点击下载
html代码
<div class="cnblogs_code" >http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code <div id="cnblogs_code_open_cfa4e96c-0a84-4b32-ad51-ead0dd0bc453" class="cnblogs_code_hide"> 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">齐鲁晚报: #小齐播新闻#【家长&ldquo;挤&rdquo;名校孩子要退学 &ldquo;名校&rdquo;虽好并非人人合适】一年半前，托了关系，花了大把力气，好不容易将女儿送进&ldquo;名校&rdquo;，可还没毕业，女儿却坚持要转入乡下的普通中学，理由是&ldquo;这里没有攀比，压力小。&rdquo;专家建议：名校并非人人合适 &ldquo;最好&rdquo;不如&ldquo;最合适&rdquo;。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后性感女星瑞秋&middot;尼科尔斯（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">齐鲁晚报: #小齐播新闻#【家长&ldquo;挤&rdquo;名校孩子要退学 &ldquo;名校&rdquo;虽好并非人人合适】一年半前，托了关系，花了大把力气，好不容易将女儿送进&ldquo;名校&rdquo;，可还没毕业，女儿却坚持要转入乡下的普通中学，理由是&ldquo;这里没有攀比，压力小。&rdquo;专家建议：名校并非人人合适 &ldquo;最好&rdquo;不如&ldquo;最合适&rdquo;。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后性感女星瑞秋&middot;尼科尔斯（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>
页:
[1]