无码专区久久综合久中文字幕 ,中文字幕亚洲综合久久久,夜夜夜高潮夜夜爽夜夜爰爰

這里給大家分享我在網(wǎng)上總結(jié)出來(lái)的一些知識(shí)，希望對(duì)大家有所幫助

文章插圖
一.需求來(lái)源今天碰到了一個(gè)需求，需要在頁(yè)面里，用水平瀑布流的方式，將一些圖片進(jìn)行加載，這讓我突然想起我很久以前寫的一篇文章《JS兩種方式實(shí)現(xiàn)水平瀑布流布局》但是有個(gè)問題，這個(gè)需求是Vue項(xiàng)目的，那沒辦法，這里給大家分享下我的開發(fā)過程，項(xiàng)目主體用的是之前在學(xué)習(xí)的CRMEB的后端框架來(lái)開發(fā)，UI使用iView-UI，其余的場(chǎng)景與其他的vue項(xiàng)目一致二.邏輯設(shè)想如果不是vue環(huán)境，我們的邏輯為1.獲取所有的div元素2.獲取盒子的寬度，寬度都是相同，高度不同3.在浮動(dòng)布局中每一行的盒子個(gè)數(shù)不固定，是根據(jù)屏幕寬度和盒子寬度決定4.獲取屏幕寬度5.求出列數(shù)，屏幕寬度 / 盒子寬度取整6.瀑布流最關(guān)鍵的是第二行的盒子的排布方式，通過獲取第一行盒子中最矮的一個(gè)的下標(biāo)，絕對(duì)定位，top是最矮盒子的高度，left是最矮盒子的下標(biāo) * 盒子的寬度7.循環(huán)遍歷所有的盒子，通過列數(shù)找到第一行所有的盒子，將第一行盒子的高度放入數(shù)組，再取出數(shù)組中最小的一個(gè)的下標(biāo)，就是第6步思路的第一行盒子中最矮盒子的下標(biāo) 。8.循環(huán)繼續(xù)，第二行第一個(gè)盒子，通過絕對(duì)定位，放進(jìn)頁(yè)面。9.關(guān)鍵，需要將數(shù)組中最小的值加上放進(jìn)的盒子的高度10.繼續(xù)循環(huán)，遍歷所有11.如果想要加載更多，需要判斷最后一個(gè)盒子的高度和頁(yè)面滾動(dòng)的距離，再將數(shù)據(jù)通過創(chuàng)建元素，追加進(jìn)頁(yè)面，再通過瀑布流布局展示但如果是Vue項(xiàng)目，我們可以把邏輯歸結(jié)為以下幾步1.獲取屏幕寬度2..獲取盒子的寬度，寬度都是相同，高度不同3.在浮動(dòng)布局中每一行的盒子個(gè)數(shù)不固定，是根據(jù)屏幕寬度和盒子寬度決定4.求出列數(shù)，屏幕寬度 / 盒子寬度取整5.瀑布流最關(guān)鍵的是第二行的盒子的排布方式，通過獲取第一行盒子中最矮的一個(gè)的下標(biāo)，絕對(duì)定位，top是最矮盒子的高度，left是最矮盒子的下標(biāo) * 盒子的寬度6.繼續(xù)循環(huán)，遍歷所有7.如果想要加載更多，需要判斷最后一個(gè)盒子的高度和頁(yè)面滾動(dòng)的距離，再將數(shù)據(jù)通過創(chuàng)建元素，追加進(jìn)頁(yè)面，再通過瀑布流布局展示三.最終效果圖片

文章插圖
四.代碼分析先看下我的html部分<template><div class="tab-container" id="tabContainer"><div class="tab-item" v-for="(item, index) in pbList" :key="index"><img :src="https://www.huyubaike.com/biancheng/item.url" /></div></div></template><style scoped>* {margin: 0;padding: 0;}/* 最外層大盒子 */.tab-container {padding-top: 20px;position: relative;}/* 每個(gè)小盒子 */.tab-container .tab-item {position: absolute;height: auto;border: 1px solid #ccc;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);background: white;/* 元素不能中斷顯示 */break-inside: avoid;text-align: center;}.tab-container .tab-item img {width: 100%;height: auto;display: block;}</style>核心js部分<script>export default {name:'compList',props:{pbList:{type:Array,default:()=>{return []}}},data() {return {};},mounted() {this.$nextTick(()=>{this.waterFall("#tabContainer", ".tab-item"); //實(shí)現(xiàn)瀑布流})},methods: {waterFall(wrapIdName,contentIdName,columns = 5,columnGap = 20,rowGap = 20) {// 獲得內(nèi)容可用寬度（去除滾動(dòng)條寬度）const wrapContentWidth =document.querySelector(wrapIdName).offsetWidth;// 間隔空白區(qū)域const whiteArea = (columns - 1) * columnGap;// 得到每列寬度(也即每項(xiàng)內(nèi)容寬度)const contentWidth = parseInt((wrapContentWidth - whiteArea) / columns);// 得到內(nèi)容項(xiàng)集合const contentList = document.querySelectorAll(contentIdName);// 成行內(nèi)容項(xiàng)高度集合const lineConentHeightList = [];for (let i = 0; i < contentList.length; i++) {// 動(dòng)態(tài)設(shè)置內(nèi)容項(xiàng)寬度contentList[i].style.width = contentWidth + "px";// 獲取內(nèi)容項(xiàng)高度const height = contentList[i].clientHeight;if (i < columns) {// 第一行按序布局contentList[i].style.top = "0px";contentList[i].style.left = contentWidth * i + columnGap * i + "px";// 將行高push到數(shù)組lineConentHeightList.push(height);} else {// 其他行// 獲取數(shù)組最小的高度和對(duì)應(yīng)索引let minHeight = Math.min(...lineConentHeightList);let index = lineConentHeightList.findIndex((listH) => listH === minHeight);contentList[i].style.top = minHeight + rowGap +"px";contentList[i].style.left = (contentWidth + columnGap) * index + "px";// 修改最小列的高度最小列的高度 = 當(dāng)前自己的高度 + 拼接過來(lái)的高度 + 行間距l(xiāng)ineConentHeightList[index] += height + rowGap;}}},},};</script>