瀑布流式布局(解决div等宽不等高，实现紧挨效果) |
您所在的位置：网站首页 › 福建紧挨哪里 › 瀑布流式布局(解决div等宽不等高，实现紧挨效果) |
瀑布流式布局(解决div等宽不等高，实现紧挨效果)
|
为什么要有瀑布流： 由于div高度不一样，不管是左浮动还是inline-block，同级的div都会平行显示(会有空白部分)。
没有加的效果：
加了瀑布流效果样子：
瀑布流实现方式： 1. css + js (难点) ： 需要通过js计算图片的位置，进行正确排放，顺序不会乱，可持续加载新的数据 2. 纯css(简单) ： 数据排序方式是列排序的，当有新的数据持续加载进入不合适，但是性能高、简单
视频教程： # 慕课网的 瀑布流布局教程视频 https://www.imooc.com/learn/101
第一种方法： 思路： 首先瀑布流的特点是 等宽不等高，需要获取到盒子的宽度，计算出多少列，拿到第一行每个盒子的高度数组，从第二行第一个开始，依次找最矮盒子的高度位置进行位置偏移即可，之后累加列高度，从而使整个页面的盒子紧挨。  
1 DOCTYPE html>
2
3
4
5 Title
6
7 body{
8 padding: 0;
9 margin: 0;
10 }
11 #pb_main{
12 position: relative;
13 }
14 #pb_main .box{
15 width: 15.6%;
16 padding: 0.5em;
17 float: left;
18 }
19 #pb_main .box .box-content{
20 border: 1px solid #aaa;
21 border-radius: 1em;
22 overflow: hidden;
23 box-shadow: 0 0 20px #ccc;
24 }
25 #pb_main .box .box-content:hover{
26 cursor: pointer;
27 transition: 0.2s;
28 transform: translateY(-5px);
29 }
30 #pb_main .box .box-content .picture{
31 }
32 #pb_main .box .box-content .picture img{
33 width: 100%;
34 }
35 #pb_main .box .box-content .pb-text{
36 padding: 5px;
37 }
38
39
40
41
42
43
44
45
46
47
48
49 let img_index = 0;
50
51 // 批量添加一些，第一批测试数据
52 function addElement(count) {
53 let pb_main = document.getElementById('pb_main');
54 for (let i=0;i last_box_h ? true:false;
136 }
137
138 window.onload = function (){
139 // 添加首次的测试元素，需要大于一屏幕
140 addElement(20);
141 // 监测滚动条
142 window.onscroll = function () {
143 // 判读是否需要加载新内容
144 if (checkScrollTop('pb_main', 'box')){
145 addElement(10);
146 // 由于图片有限，重置
147 if (img_index >= 29){
148 img_index = 0;
149 }
150 }
151 }
152 }
153
154
155
156
View Code
// 图片素材自己找点(30张图片)，就可以看运行效果了
第二种方法： .my-card-wrapper{ -moz-column-count:2; -webkit-column-count:2; column-count:2; -moz-column-gap:0; -webkit-column-gap:0; padding-top: 0.5em; } .my-card{ border: 1px solid #cccccc; padding: 8px; border-radius: 10px; -moz-page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid; margin: 0 0.5em 0.5em; }// 斜体加粗部分是关键代码
代码解释： column-count # 流式布局几列显示 -moz-column-count:2; # 为了适配不同浏览器 -webkit-column-count:2; # 为了适配不同浏览器 -webkit-column-gap:0; # 列之前的间隔，有默认间隔值，为了不影响效果，我改的0，自己做边距 break-inside: avoid; # 防止多列布局，分页媒体和多区域上下文中的意外中断?? 不懂设置上即可 |
【本文地址】
今日新闻 |
推荐新闻 |