【业务】手写图片瀑布流


阅读数:   

前言

首先，图片瀑布流我看到网上主要有两种，等高不等宽（代表：百度图片）和等宽不等高（代表：LOFTER）。

对于要保证图片顺序的情况，推荐等高不等宽的形式。

对于一个高逼格的照片墙来说，推荐等宽不登高的形式。

PS: 对于需要按照顺序显示的图片，不适合使用图片瀑布流的形式，因为图片瀑布流需要打乱图片顺序。

个人思考实现两种形式

等高不等宽

这里我是直接使用了flex布局，但是有个缺陷是图片会被失去比例缩放。我真正希望实现的百度图片里面的效果，后面再研究下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
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
92
93
94
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            .box {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            
            .box img {
                flex-grow: 1;
                height: 230px;
                border: 5px solid #000C21;
            }
        </style>
	</head>
	<body>
        <div class="box"></div>
        
        <script>
            var imgList = ["blog/1460000022396509","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396509",
            "blog/1460000022396511","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396511",
            "blog/1460000022396510","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396510",
            "blog/1460000022396512","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396512",
            "blog/1460000022396513","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396513",
            "blog/1460000022396514","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396514",
            "blog/1460000022396516","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396516",
            "blog/1460000022396643","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396643",
            "blog/1460000022396644","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396644",
            "blog/1602990069196.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1602990069196.png",
            "blog/1608295464276.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1608295464276.png",
            "blog/1609771436187.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1609771436187.png",
            "blog/1610073459669.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1610073459669.png",
            "blog/1610084693548.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1610084693548.png",
            "blog/1610099326371.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1610099326371.png",
            "blog/1610110774728.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1610110774728.png",
            "blog/1610187111063.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1610187111063.png",
            "blog/1612348098392.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612348098392.png",
            "blog/1612348371474.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612348371474.png",
            "blog/1612348280889.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612348280889.png",
            "blog/1612348560632.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612348560632.png",
            "blog/1612348658049.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612348658049.png",
            "blog/1612349071173.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612349071173.png",
            "blog/1613956990436.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1613956990436.png",
            "blog/2018090817414519.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/2018090817414519.png",
            "blog/20180908181636512.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20180908181636512.png",
            "blog/20180908183437297.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20180908183437297.png",
            "blog/20180908183926373.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20180908183926373.png",
            "blog/20180913094929489.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20180913094929489.png",
            "blog/20180913095207414.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20180913095207414.png",
            "blog/2018091310222837.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/2018091310222837.png",
            "blog/20181014165823625.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20181014165823625.png",
            "blog/20190427221345687.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20190427221345687.png",
            "blog/20190606233930688.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20190606233930688.png",
            "blog/20190606234126886.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20190606234126886.png",
            "blog/20190606234220530.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20190606234220530.png",
            "blog/20190606234242231.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20190606234242231.png",
            "blog/20191020145826297.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20191020145826297.png",
            "blog/20191223103325936.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20191223103325936.png",
            "blog/20191223103548786.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20191223103548786.png",
            "blog/20191223103613185.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20191223103613185.png",
            "blog/20191223103636686.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20191223103636686.png",
            "blog/20200814155645489.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20200814155645489.png",
            "blog/20200814155724685.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20200814155724685.png",
            "blog/20200814155817149.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20200814155817149.png",
            "blog/202008141559151.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/202008141559151.png",
            "blog/20200814160023893.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20200814160023893.png",
            "blog/20200814160135457.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20200814160135457.png",
            "blog/2020082319132032.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/2020082319132032.png",
            "blog/20201030104949335.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20201030104949335.png"]
            
            imgList = imgList.filter(function(value, index){
                return index % 2 === 1
            })
            
            const box = document.getElementsByClassName('box')[0]
            imgList.forEach(function(value){
                const img = document.createElement('img')
                img.src = value
                box.appendChild(img)
            })
        </script>
	</body>
</html>

等宽不等高

众所周知，网页都是横向排列，有一个叫“基线”的东西，类似英语作业本，不管是行内元素还是块级元素都是只能和在英语本上写字一样，一行一行写，这叫做文档流。而打破的文档流的方式就是定位，所以方法一就是使用定位的方式，算出每个元素的位置。这种方式太不优雅了，所以我放弃。方法二就是改变排版的方向，这里就想到了flex布局和column布局。我这里使用flex布局举个例子，代码如下：

改变排版方向也可以使用：writing-mode: vertical-lr; 但是把里面的元素作为inline了，无法设置宽高，所以需要等宽不能用这个css属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            .box {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                height: 100px;
				overflow: auto;
            }
            
            .box img {
                width: 33.3333%;
                border: 5px solid #000C21;
            }
        </style>
	</head>
	<body>
        <div class="box"></div>
        
        <script>
            var imgList = ["blog/1460000022396509","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396509",
            "blog/1460000022396511","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396511",
            "blog/1460000022396510","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396510",
            "blog/1460000022396512","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396512",
            "blog/1460000022396513","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396513",
            "blog/1460000022396514","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396514",
            "blog/1460000022396516","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396516",
            "blog/1460000022396643","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396643",
            "blog/1460000022396644","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1460000022396644",
            "blog/1602990069196.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1602990069196.png",
            "blog/1608295464276.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1608295464276.png",
            "blog/1609771436187.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1609771436187.png",
            "blog/1610073459669.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1610073459669.png",
            "blog/1610084693548.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1610084693548.png",
            "blog/1610099326371.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1610099326371.png",
            "blog/1610110774728.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1610110774728.png",
            "blog/1610187111063.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1610187111063.png",
            "blog/1612348098392.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612348098392.png",
            "blog/1612348371474.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612348371474.png",
            "blog/1612348280889.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612348280889.png",
            "blog/1612348560632.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612348560632.png",
            "blog/1612348658049.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612348658049.png",
            "blog/1612349071173.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1612349071173.png",
            "blog/1613956990436.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/1613956990436.png",
            "blog/2018090817414519.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/2018090817414519.png",
            "blog/20180908181636512.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20180908181636512.png",
            "blog/20180908183437297.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20180908183437297.png",
            "blog/20180908183926373.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20180908183926373.png",
            "blog/20180913094929489.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20180913094929489.png",
            "blog/20180913095207414.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20180913095207414.png",
            "blog/2018091310222837.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/2018091310222837.png",
            "blog/20181014165823625.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20181014165823625.png",
            "blog/20190427221345687.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20190427221345687.png",
            "blog/20190606233930688.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20190606233930688.png",
            "blog/20190606234126886.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20190606234126886.png",
            "blog/20190606234220530.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20190606234220530.png",
            "blog/20190606234242231.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20190606234242231.png",
            "blog/20191020145826297.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20191020145826297.png",
            "blog/20191223103325936.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20191223103325936.png",
            "blog/20191223103548786.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20191223103548786.png",
            "blog/20191223103613185.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20191223103613185.png",
            "blog/20191223103636686.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20191223103636686.png",
            "blog/20200814155645489.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20200814155645489.png",
            "blog/20200814155724685.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20200814155724685.png",
            "blog/20200814155817149.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20200814155817149.png",
            "blog/202008141559151.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/202008141559151.png",
            "blog/20200814160023893.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20200814160023893.png",
            "blog/20200814160135457.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20200814160135457.png",
            "blog/2020082319132032.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/2020082319132032.png",
            "blog/20201030104949335.png","http://qp0hqw3v0.hn-bkt.clouddn.com/blog/20201030104949335.png"]
            
            imgList = imgList.filter(function(value, index){
                return index % 2 === 1
            })
            
            const box = document.getElementsByClassName('box')[0]
            imgList.forEach(function(value){
                const img = document.createElement('img')
                img.src = value
                box.appendChild(img)
            })
            
            window.onload = function(){
            	// 判断node是否有Y轴方向滚动条
				function hasScrollY(node) {
					return node.scrollHeight > node.clientHeight;
				}
				// 判断node是否有X轴方向滚动条
				function hasScrollX(node) {
					return node.scrollWidth > node.clientWidth;
				}
				// 增加父盒子高度的方法
				function addBoxHeight() {
					if (hasScrollX(box)) {
						box.style.height = box.offsetHeight + 100 + 'px'
					} else {
						window.clearInterval(interval)
					}
				}

                const interval = window.setInterval(addBoxHeight, 0)
            }
        </script>
	</body>
</html>

总结

我上面的两种方式都有很大的局限性，除了上面所述的问题，也有兼容性的问题。关于等宽不等高的column布局的方式和纯js实现的方式我懒没有自己写了，之后有空再补充。

另外，关于flex语法的详细说明，见：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/21d87fcc.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true