(HTML)关于格子流布局方案可以如此设计

该方案是兼容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