0 Comments

大小不一的图片不规则排列

发布于:2012-11-15  |   作者:广州网站建设  |   已聚集:人围观
图片列表

图片是网页中传达信息的基本元素,也是设计网页时最常用到的信息表现形式。但是,在页面布局中图片的摆放与排列却是让人很头疼的问题。本节主要介绍如何使用jQuery控制图片以列表形式规则摆放。

4.4.1  大小不一的图片不规则排列

如果单纯依靠<li>和<img>标记来摆放图片,实现图片大小统一并规则摆放是件很麻烦的事情。例如,下面这个静态页面:


  1. <ul> 
  2. 2  <li><img src="img/img1.jpg"/></li> 
  3. 3  <li><img src="img/img2.gif" /></li> 
  4. 4  <li><img src="img/img3.jpg"/></li> 
  5. 5  <li><img src="img/img4.gif" /></li> 
  6. 6  <li><img src="img/img5.jpg" /></li> 
  7. 7  <li><img src="img/img6.jpg"/></li> 
  8. 8  <li><img src="img/img7.gif" /></li> 
  9. 9  <li><img src="img/img8.gif"/></li> 
  10. 10</ul> 

 

标签:
飞机