html格子切换效果图,(HTML)关于格子流布局方案可以如此设计

该方案是兼容ie9及以下的,当然如果你的开发需求不需要兼容IE的，就像vue.js3一样完全放弃IE辣鸡浏览器的就不需要这样做，可以直接使用flex(弹性布局)，简单舒服。

描述一下使用情景

当拿到一张方格平铺的设计图，第一个想法应该是想到table标签，或flex布局。

情景

布局结构

...

说明

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

主要代码

格子流布局方案

.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;

}

格子流布局方案

居左

居右

居中

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;

项目源码