网站建设公司的方案,广州三合一网站建设,网站公司后台,wordpress页面设置栏目瀑布流又称瀑布流式布局#xff0c;是一种多列等宽不等高的一种页面布局方式。 视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动#xff0c;这种布局会不断加载数据并附加至当前的尾部。是一种多列等宽不等高的一种页面布局方式#xff0c;用于图片比较复杂#xff… 瀑布流又称瀑布流式布局是一种多列等宽不等高的一种页面布局方式。 视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动这种布局会不断加载数据并附加至当前的尾部。是一种多列等宽不等高的一种页面布局方式用于图片比较复杂图片尺寸比较复杂时可以使用的一种展示方式这种展示方式可以使页面比较美观让人有种错落有致的感觉。瀑布流是一种允许用户不断往下滑动页面自动刷新呈现内容的交互形式。瀑布流的主要特性便是错落有致定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。沉浸式可以让用户更快、更好地进入视频情境之中而忘记真实世界的情境因为没有其它视频信息的干扰能够让用户只专注于当前的视频。设置成瀑布流样式且视频浏览模式开启沉浸式浏览后视频播放模式会以类似“抖音上下滑的沉浸式视频浏览方式展现。 瀑布流的优点
优点如下
节省空间外表美观更有艺术性。对于触屏设备非常友好通过向上滑动浏览用户浏览时的观赏和思维不容易被打断留存更容易。 从体验的心理讲女性是一种逛街数小时都不需要停歇的生物一眼望不到头的瀑布流契合了这种心理。瀑布流的图片就像商品就像逛街、就像扫货。女性只要不断往下拉伸页面就像置身在一条没有尽头的购物街没有层高限制的商场中一样
瀑布流的缺点
缺点如下
用户无法了解内容总长度对内容没有宏观掌控。用户无法了解现在所处的具体位置不知道离终点还有多远。回溯时不容易定位到之前看到的内容。容易造成页面加载的负荷。容易造成用户浏览的疲劳没有短暂的休息时间。
瀑布流的适用场景
内容以图片为主的时候瀑布流是更好的选择。图片占用空间比较大并且大脑理解的速度相比理解文字要快短时间内可以扫过的内容很多所以如果用分页显示的话用户务必会频繁的翻页影响沉浸式的体验而瀑布流可以解决这个问题。信息与信息之间相对独立时瀑布流是更好的选择。如果信息关联性强用户务必会进行大量的回溯操作去查看之前或者之后的信息相反如果信息相对独立的话可以使用瀑布流让用户同时接受来自不同地方的信息。信息与搜索匹配比较模糊时瀑布流是更好的选择。瀑布流给人的直观印象就是同时显示的信息与用户搜索的匹配度大致一样而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配。因此当信息与搜索匹配度没有明显区分度时可以采用瀑布流。
实现方式 原生JS实现瀑布流 html布局 div idwrapdiv classitem11/divdiv classitem22/divdiv classitem33/divdiv classitem44/divdiv classitem55/divdiv classitem66/divdiv classitem77/divdiv classitem88/divdiv classitem99/divdiv classitem1010/div/div css样式
style* {margin: 0;padding: 0;}body {padding: 10px;background-color: lightgray;}body::-webkit-scrollbar {width: 4px;height: 1px;}body::-webkit-scrollbar-thumb {border-radius: 2px;background: #E0E0E0;}body::-webkit-scrollbar-track {border-radius: 10px;background: #FFF;}#wrap {width: 100%;height: calc(100vh - 20px);/* 父元素设置相对定位 */position: relative;}#wrap div {width: calc(100% / 3 - 20px / 3);background-color: #FFF;border-radius: 8px;/* 子元素设置绝对定位 */position: absolute;/* 初始的左、上边距都设置为0 */left: 0;top: 0;font-size: 40px;font-weight: bold;text-align: center;}#wrap div img {width: 100%;border-radius: 8px 8px 0 0;vertical-align: bottom}#wrap div p {font-size: 24px;}.item1 {height: 200px;}.item2 {height: 250px;}.item3 {height: 150px;}.item5,.item7 {height: 200px;}.item4,.item10 {height: 150px;}.item6 {height: 240px;}.item9 {height: 200px;}.item8 {height: 250px;}/style js代码
scriptlet divList $(#wrap div) // 获取到需要布局显示的div容器divList Array.from(divList) // 通过Array的from()方法将伪数组转化为真正的数组let pageW document.documentElement.clientWidth // 获取当前屏幕的宽度let divW divList[0].clientWidth // 获取一个div容器的宽度let cols Math.floor(pageW / divW) // 计算一行能够放几个div容器let arrH [] // 用来存储每个div容器的高度// 循环div容器的数组divList.forEach((item, index) {// 1. 对下标小于一行个数的div容器进行操作if (index cols) {arrH.push(item.clientHeight) // 将div容器的高度放入数组中item.style.left index * divW index * 10 px // 同时设置每个容器的left值第一行top都为0}})// 2. 对剩余的div容器进行循环for (let i cols; i divList.length; i) {let minH Math.min.apply(Math, arrH), // 获取到数组中最小的高度idx_min arrH.indexOf(minH) // 查找到最小高度的下标divList[i].style.left divList[idx_min].style.left // 让当前的div容器和最小下标的left值相同divList[i].style.top minH 10 px // top值在原来的最小高度上10为了是容器之间有一个间隙可随意写// 最小列的高度 当前自己的高度 新容器的高度 间隙arrH[idx_min] minH divList[i].clientHeight 10}/script
column多列布局实现瀑布流 html结构和js实现的布局一样 改变一下css的样式
* {margin: 0;padding: 0;
}body {padding: 5px;background-color: lightgray;
}body::-webkit-scrollbar {width: 4px;height: 1px;
}body::-webkit-scrollbar-thumb {border-radius: 2px;background: #E0E0E0;
}body::-webkit-scrollbar-track {border-radius: 10px;background: #FFF;
}/* 使用column多列布局 */
/* 主要使用了 column-count 和 column-gap 属性
*/
#wrap {width: 100%;height: calc(100vh - 20px);column-count: 3; /* 列数 */column-gap: 10px; /* 列与列之间的距离 */
}#wrap div {background-color: #FFF;border-radius: 8px;font-size: 40px;font-weight: bold;text-align: center;margin-bottom: 10px;
}#wrap div img{width: 100%;border-radius: 8px 8px;vertical-align: bottom;
}#wrap div p{font-size: 24px;
}.item1 {height: 200px;
}.item2 {height: 250px;
}.item3,
.item5,
.item7 {height: 200px;
}.item4,
.item10 {height: 150px;
}.item6{height: 240px;
}
.item9 {height: 100px;
}.item8 {height: 250px;
}
