该方案是兼容ie9及以下的,当然如果你的开发需求不需要兼容IE的，就像vue.js3一样完全放弃IE辣鸡浏览器的就不需要这样做，可以直接使用flex(弹性布局)，简单舒服。
描述一下使用情景
当拿到一张方格平铺的设计图，第一个想法应该是想到table标签，或flex布局。
情景
布局结构
<div class="wrap">
<div class="layer">
<div class="item"></div>
...
</div>
</div>
说明
wrap用于决定layer整体的对齐。
比如水平方向的位置：
- 居左
居左.png
.wrap{
width:190px;
text-align:left;
}
.layer{
display:inline-block;
}
- 居右
居右.png
.wrap{
width:190px;
text-align:right;
}
.layer{
display:inline-block;
}
- 居中
居中.png
.wrap{
width:190px;
text-align:center;
}
.layer{
display:inline-block;
}
layer用于决定内容的对齐方式
其原理就是利用文字的text-align的属性(inline元素和inline-block元素生效)，通过限制布局的宽达到每行多少块元素（注意元素需要为inline-block，width和height才有效）。
比如:
-
靠左
left.gif -
靠右
right.gif -
居中
center.gif
item就是内容项，注意这里要求是inline-block
当item为inline-block可以拥有盒子模型的属性且可以使用text-align和vertical-align的属性(用于定height的垂直居中)
案例代码展示
- 项目结构
cellFlowLayout
│ index.html
│
└───src
├───gif
│ center.gif
│ left.gif
│ right.gif
│
└───img
item1.jpg
item2.jpg
item3.jpg
item4.jpg
item5.jpg
item6.jpg
item7.jpg
- 主要代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>格子流布局方案</title>
<style type="text/css" lang="css">
.wrap {
background: #D7FFF1;
width: 1080px;
margin: 0 auto;
text-align: center;
}
.layer {
display: inline-block;
background: #77AF9C;
width: 1000px;
margin-bottom: 20px;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.item {
display: inline-block;
margin: 10px;
width: 180px;
height: 135px;
/*下面的是骚气属性*/
border-radius: 4px;
transition: all 300ms ease 0ms;
}
/*骚气属性和案例无关*/
.item:hover{
transition: all 300ms ease 0ms;
transform: translateY(-5px);
box-shadow: 0 2px 6px 2px rgba(0,0,0,0.8);
}
h1 {
text-align: center;
color: #285943;
}
h2 {
padding: 10px 0 0 20px;
color: #285943;
}
</style>
</head>
<body>
<h1>格子流布局方案</h1>
<div class="wrap">
<h2>居左</h2>
<div class="layer left" id="content">
</div>
</div>
<div class="wrap">
<h2>居右</h2>
<div class="layer right" id="contentRight">
</div>
</div>
<div class="wrap">
<h2>居中</h2>
<div class="layer center" id="contentCenter">
</div>
</div>
<script>
function addClassName(node,name) {
// 为了兼容ie9及9以下：老版本的IE的DOM Element和window是没有hasOwnProperty方法的。
if(Object.prototype.hasOwnProperty.call(node,'classList')){
node.classList.add(name); // node.classList.add该方法ie 9及9以下不支持
}else {
node.className += node.className.length>0?' '+name:name;
}
}
function createImage(name, imageInfo) {
var img = document.createElement('img');
addClassName(img,'item');
img.src = imageInfo.prefix + name + imageInfo.suffix;
return img;
}
function instanceLayer(id,num=7) {
var ul = document.getElementById(id);
var total = num;
var imgInfo = {
prefix: './src/img/item',
suffix: '.jpg'
};
for (var i = 0; i < num; i++) {
ul.appendChild(createImage(i + 1, imgInfo));
}
}
function initPage() {
instanceLayer('content');
instanceLayer('contentRight');
instanceLayer('contentCenter');
}
document.body.onload = initPage;
</script>
</body>
</html>
项目源码
https://github.com/Cendeal/interest-learn-html/tree/master/cellFlowLayout
