网页中多图排列方式在不同场合的应用

网页设计布局中会用到很多的图片，如果这些图片需要在一个页面中展示并且图片大小不一，如下图所示的情况，就会牵扯到这些图片怎么排列的问题，今天小编就给大家讲解下常见图片排序的一些方法。

不规则图片排列

第一种：图片伸缩变形为同一大小。最常见的排序方案，无论图片大小比例为什么，统一拉伸缩放到一个大小，图片样式设置为img{width: 100%;height: 100%;},这种排序简单粗暴不在乎图片变形问题，很多网站往往会采用这样的方式。

图片伸缩我同一尺寸

图片拉伸变形

第二种：图片等高度，宽度自适应。图片如果很多的情况下采用的一种排序方式，图片外框高度固定，图片大小缩放到统一高度，宽度自适应，图片样式设置为img{width: auto;height:100%; }，这种排序需要图片很多并且需要程序计算图片宽度，保证每行总宽度相等。

图片等高排列宽度自适应

这种排序比较典型的案例是百度图片搜索页面，它使用的就是这种排序，是基于图片数据很大并且程序计算，保证了每行总宽度基本相等。

图片等高排列宽度自适应

第三种：图片等宽度，高度自适应。图片如果很多的情况下采用的一种排序方式，图片分多栏，图片高度不同会有错位效果。图片样式设置为img{width: 100%;height:auto;}俗称瀑布流，多用于图片展示型网站和购物网站中。

图片等宽排列瀑布流

比如蘑菇街就是采用这种排序方式

图片等宽排列瀑布流

第四种：图片外框大小固定，图片缩放自适应外框。这种方式基本和第一种一样，不同的是图片不会变形。图片样式设置为img{max-width: 100%;max-height:100%;}

图片缩放宽高自适应

第五种：图片大小不变，错位布局。类似拼图效果这种方式最麻烦，需要绝对定位才能保证不错位，使用的比较少，遇到这种情况多使用ps排版。

拼图效果

好了，到这里图片排序布局常见的5种方式就介绍完了，至于应用中采用哪种比较好就需要具体场景具体分析了，我的建议是：

一：如果图片少要求不高的话采用第一种最省心，如果客户要求图片不能变形的话采用第四种比较好；

二：如果图片比较多的话，如果主要是pc端浏览的话采用类似百度图片那样的第二种排序，如果主要是移动设备浏览的话采用蘑菇街类似的瀑布流也就是第三种布局；

三：如果牵扯的拼团效果的话，最好的方法还是ps做成一张图片最好，使用css的话部分浏览器会错位影响效果。

天下没有难画的简笔画，愿天下知识都能秒会

福利：懒人简笔画发粉丝红包了，支付宝首页搜索“9092116”领取，现金发放，人人有份

javascript
1.第1个程序helloworld	2.简明教程	3.技巧大全
4.Qrcode生成二维码	5.qrious生成二维码	6.jquery生成二维码
7.开发js小游戏	8.经典类库	9.13个类库
10.12个图表类库	11.几十个学习网站	12.js正则表达式
13.weui等18个库

function go

{

var allHtml="";

var h=35;//高

var w=30;//宽

var l=25; //每行l个

var cell=80;//格子大小

for( var i=0;i<500;i++)

{

var yTop=Math.tan(26.5*2*Math.PI/360)*w;

var x1=10+i%l*cell;

var y1=parseInt(i/l)*cell;

var x2=x1+w;

var y2=y1-yTop;

var x3=x1+w+w;

var y3=y1;

var x4=x3;

var y4=y1+h;

var x5=x2;

var y5=y4+yTop;

var x6=x1;

var y6=y4;

var x7=x2;

var y7=y1+yTop;

var strh=h.toString;

var strw=w.toString;

var strx1=x1.toString;

var stry1=y1.toString;

var strx2=x2.toString;

var stry2=y2.toString;

var strx3=x3.toString;

var stry3=y3.toString;

var strx4=x4.toString;

var stry4=y4.toString;

var strx5=x5.toString;

var stry5=y5.toString;

var strx6=x6.toString;

var stry6=y6.toString;

var strx7=x7.toString;

var stry7=y7.toString;

if( y5<=y7 ) break;

allHtml+="<g><polyline fill=\"none\" stroke=\"#000000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" points=\""+strx1+","+stry1+" "+strx2+","+stry2+" "+strx3+","+stry3+" "+strx4+","+stry4+" "+strx5+","+stry5+" "+strx6+","+stry6+" "+strx1+","+stry1+"\"/>";

allHtml+="\n";

allHtml+="<line stroke=\"#000000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\""+strx1+"\" y1=\""+stry1+"\" x2=\""+strx7+"\" y2=\""+stry7+"\"/>";

allHtml+="\n";

allHtml+="<line stroke=\"#000000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\""+strx3+"\" y1=\""+stry3+"\" x2=\""+strx7+"\" y2=\""+stry7+"\"/>";

allHtml+="\n";

allHtml+="<line stroke=\"#000000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\""+strx5+"\" y1=\""+stry5+"\" x2=\""+strx7+"\" y2=\""+stry7+"\"/></g>";

h-=0.1;

}

document.getElementById('txt1').value=allHtml;

}

</script>

简笔画
1.工具	2.排线	3.自动画画
4.表情	5.眼睛	6.鼻子
7.嘴	8.发	9.手
10.身	11.姿势	12.衣服
13.火柴人	14.Q版人物	15.十二生肖
16.猫	17.鼠	18.牛
19.虎	20.兔	21.龙
22.蛇	23.马	24.羊
25.猴	26.鸡	27.狗
28.猪	29.大象	30.狮子
31.长颈鹿	32.鸟	33.虾蟹
34.鱼	35.蛙	36.建筑
37.家具	38.文具	39.交通
40.花草	41.树	42.水果
43.蛋糕	44.食物	45.春节
46.圣诞素材	47.盆栽	48.风景
49.车	50.乐器	51.房子
52.京剧	53.3D	54.七龙珠全家福
55.小丸子全家福	56.蜡笔小新全家福	57.机器猫全家福
58.巴巴爸爸全家福	59.小猪佩奇全家福	60.旅行青蛙全家福
61.光头强熊出没全家福	62.海绵宝宝全家福	63.丁老头全家福
64.米老鼠全家福	65.大白	66.粉红豹
67.葫芦娃全家福	68.蓝精灵全家福	69.超级飞侠
70.柯南	71.老夫子	72.辛普森
73.喜羊羊	74.花仙子	75.挤娃娃
76.装饰画	77.英语花体	78.纹身画
79.灰尘画	80.漫画插画家	81.沙画
82.像素画	83.春节	84.粉红豹
85.阿狸	86.超人	87.猫和老鼠
88.石头画	89.插花	90.思维导图
91.ai	92.sai	93.photoshop
94.狐狸	95.阿拉蕾	96.花木兰
97.奥特曼	98.一拳超人	99.复仇者联盟
100.英雄联盟	101.河马	102.尔康
103.地图

懒人大学-愿天下知识都能秒会
1.简笔画	2.公开课	3.水彩
4.水墨画	5.书法	6.手抄报
7.像素画	8.数位板	9.手帐
10.素描	11.速写	12.花体
13.自动画画	14.折纸	15.唱歌
16.编曲	17.尤克里里	18.吉他
19.物理	20.化学	21.少儿舞蹈
22.C语言	23.爬虫	24.AI音箱评测
25.手机评测	26.PPT	27.ai
28.sai	29.Excel	30.程序员网站
31.Linux	32.ih5	33.小程序
34.javascript	35.公众号	36.搜索引擎
37.中国历史	38.声律启蒙	39.鬼故事
40.幸福故事	41.解剖学	42.常见病
43.国学	44.国际音标	45.日语
46.马来语	47.德语	48.藏语
49.意大利语	50.葡萄牙语	51.西班牙语
52.越南语	53.泰语	54.俄语
55.阿拉伯语	56.韩语	57.英语
58.法语	59.Adobe Illustrator	60.Adobe Photoshop
61.摄影教程汇总	62.经典片头欣赏	63.粥
64.饺子	65.烹饪教程汇总	66.会计
67.插花教程汇总	68.健身	69.瑜伽
70.ted演讲汇总	71.思维导图	72.整理教程汇总
73.装修	74.包包DIY教程	75.科学
76.区块链	77.伟人	78.玩具
79.体育	80.电子	81.考研政治
82.哲学	83.旅游	84.服装
85.股票	86.种菜	87.建筑
88.t恤	89.数字电路	90.高考
91.AE特效	92.生物学	93.人工智能
94.棋牌	95.机器人	96.童话
97.玩具	98.粥	99.征稿
100.炒菜机	101.access	102.自媒体
103.投资	104.武器	105.力学

找不到您需要的教程?加群留言吧

懒人大学vip QQ群433569528

《懒人简笔画》同名图书已发售

京东，当当，淘宝，亚马逊搜懒人简笔画

史上第1本手残党秒会画画的书

报名懒人大学1对1培训班请加微信:mhw1212666

投稿请私信微博：懒人简笔画

福利：打开支付宝首页搜索“9092116”，即可领懒人大学专属随机红包，每天都有哦

可以使用 HTML 创建表格。

实例

表格

[demo]

<html>

<head>

</head>

<body>

<p>每个表格由 table 标签开始。</p>

<p>每个表格行由 tr 标签开始。</p>

<p>每个表格数据由 td 标签开始。</p>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

[/demo]

这个例子演示如何在 HTML 文档中创建表格。

表格边框

[demo]

<html>

<head>

</head>

<body>

<h4>带有普通的边框：</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>带有粗的边框：</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>带有很粗的边框：</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示各种类型的表格边框。

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<tr>

</tr>

</table>

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：

Heading Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<tr>

</tr>

<tr>

</tr>

</table>

表格中的空单元格

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器中显示如下：

row 1, cell 1 row 1, cell 2

row 2, cell 2

更多实例

没有边框的表格

[demo]

<html>

<head>

</head>

<body>

<h4>这个表格没有边框：</h4>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

<h4>这个表格也没有边框：</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

[/demo]

本例演示一个没有边框的表格。

表格中的表头(Heading)

[demo]

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>垂直的表头：</h4>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何显示表格表头。

空单元格

[demo]

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>

<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>

<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>

<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>

</body>

</html>

[/demo]

本例展示如何使用 " " 处理没有内容的单元格。

带有标题的表格

[demo]

<html>

<head>

</head>

<body>

<h4>这个表格有一个标题，以及粗边框：</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

[/demo]

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

[demo]

<html>

<head>

</head>

<body>

<h4>横跨两列的单元格：</h4>

<tr>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>横跨两行的单元格：</h4>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

[demo]

<html>

<head>

</head>

<body>

<tr>

<td>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

</td>

<td>这个单元包含一个表格：

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>这个单元包含一个列表：

<ul>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何显示在不同的元素内显示元素。

单元格边距(Cell padding)

[demo]

<html>

<head>

</head>

<body>

<h4>没有 cellpadding：</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>带有 cellpadding：</h4>

<table border="1"

cellpadding="10">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

[demo]

<html>

<head>

</head>

<body>

<h4>没有 cellspacing：</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>带有 cellspacing：</h4>

<table border="1"

cellspacing="10">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何使用 Cell spacing 增加单元格之间的距离。

向表格添加背景颜色或背景图像

[demo]

<html>

<head>

</head>

<body>

<table border="1"

bgcolor="red">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<table border="1"

background="./imagecopy1234567890/test.gif">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何向表格添加背景。

向表格单元添加背景颜色或者背景图像

[demo]

<html>

<head>

</head>

<body>

<tr>

<td bgcolor="red">First</td>

</tr>

<tr>

<td

background="./imagecopy1234567890/test.gif">

Second</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何向一个或者更多表格单元添加背景。

在表格单元中排列内容

[demo]

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。

框架(frame)属性

[demo]

<html>

<head>

</head>

<body>

<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

<p>Table with frame="above":</p>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

<p>Table with frame="below":</p>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

<p>Table with frame="hsides":</p>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

<p>Table with frame="vsides":</p>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何使用 "frame" 属性来控制围绕表格的边框。

表格标签

表格描述

<table> 定义表格

<caption> 定义表格标题。

<th> 定义表格的表头。

<tr> 定义表格的行。

<td> 定义表格单元。

<thead> 定义表格的页眉。

<tbody> 定义表格的主体。

<tfoot> 定义表格的页脚。

<col> 定义用于表格列的属性。

<colgroup> 定义表格列的组。

在线咨询

上一篇：手把手教你前端的各种文件上传攻略和大文件断点续传
下一篇：PDF不知道怎么转成HTML？推荐两个快速转换方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

网页中多图排列方式在不同场合的应用

您的项目需求