瀑布流布局 js定位
生活随笔
收集整理的這篇文章主要介紹了
瀑布流布局 js定位
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
瀑布流布局 代碼可當(dāng)做參考 根據(jù)自己的實(shí)際狀況做下修改?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><style>* {padding: 0;margin: 0;box-sizing: border-box;}#app {max-width: 900px;margin: 0 auto;border: 1px solid #f00;height: 50px;padding-top: 300px;}/*宮格布局 grid-column-gap: 10px; 這個(gè)只是預(yù)覽是寬度 不影響最終結(jié)果*/.list {position: relative;display: grid;grid-template-columns: repeat(5, 1fr);grid-column-gap: 10px;}.item {margin-bottom: 10px;}.item img {width: 100%;display: block;margin: 0 auto;opacity: 0.1;transition: opacity 1s;}.item div {text-align: center;}</style></head><body><div id="app"><div class="list"><div v-for="item in list" class="item" v-if="item.src"><img :src="item.src" alt="" @load="imgLoad($event)" /><div>{{item.text}}</div></div></div></div><script type="text/javascript">// vuevar app = new Vue({el: '#app',data: {list: images,colCount: 5, //列的數(shù)量 這里和宮格布局時(shí)相互對(duì)應(yīng) grid-template-columns: repeat(5, 1fr); colHeightArray: [], // 存放每一列的高度的數(shù)組 橫向一排lock: false //分頁(yè)鎖},created() {//設(shè)置初始 首列位置 默認(rèn)為0 第一排也必須為0for(var i = 0; i < this.colCount; i++) {this.colHeightArray[i] = 0;}//滾動(dòng)到底部分頁(yè)window.addEventListener('scroll', () => {var scr = document.documentElement.scrollTop || document.body.scrollTop; // 向上滾動(dòng)的那一部分高度var clientHeight = document.documentElement.clientHeight; // 屏幕高度也就是當(dāng)前設(shè)備靜態(tài)下你所看到的視覺(jué)高度var scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 整個(gè)網(wǎng)頁(yè)的實(shí)際高度，兼容Pc端if(scr + clientHeight + 10 >= scrHeight) {if(this.lock)returnthis.lock = truethis.list = [...this.list, ...images]}});},methods: {//監(jiān)聽(tīng)圖片加載完成imgLoad(e) {//獲取當(dāng)前元素let el = e.currentTarget//獲取最低的那個(gè)高度 初始時(shí)上面已設(shè)置為0var minHeight = this.colHeightArray[0];//高度最低元素的下標(biāo)var minIndex = 0;//循環(huán)當(dāng)前列 獲取最低高度和最低高度元素的下標(biāo)for(var i = 0; i < this.colCount; i++) {if(this.colHeightArray[i] < minHeight) {minHeight = this.colHeightArray[i];minIndex = i;}}//動(dòng)態(tài)重置 元素位置$(el).parent().css({//設(shè)置 定位position: 'absolute',//元素距離左側(cè)的距離 那個(gè)10為間距 可自行調(diào)整 和css中g(shù)rid-column-gap: 10px; 意思相同left: minIndex * ($(el).parent().width() + (minIndex != 0 ? 10 : 0)),//距離頂部的距離top: minHeight,//重設(shè)寬度 grid布局需要重新設(shè)置 寫死的話擇不需要width: $(el).parent().width(),})$(el).css({opacity:1})//解開分頁(yè)鎖if($(el).parent().index() == this.list.length - 1) {this.lock = false}//重新設(shè)置 存放每一列的高度的數(shù)組this.colHeightArray[minIndex] += $(el).parent().outerHeight(true)}}})</script></body></html>images 數(shù)據(jù)（或者自行查找）
var images = [{src: 'https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-4.jpg',text: '天狼繪夢(mèng)者'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-3.jpg',text: '梁祝'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-2.jpg',text: '修竹墨客'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-1.jpg',text: '驚鴻之筆'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/528/528-bigskin-1.jpg',text: '孤獵'},{src: 'https://pic2.52pk.com/files/190419/7913716_103558_1_lit.jpg',text: '瑤妹'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/528/528-bigskin-2.jpg',text: '鯊之獵刃'},{src: 'https://pic2.52pk.com/files/190419/7913716_103610_1_lit.jpg',text: '瑤妹'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-1.jpg',text: '破鏡之刃'},{src: 'https://up.enterdesk.com/edpic/09/27/bb/0927bb0c7831705c2123d5f481f7761b.jpg',text: '露娜紫霞仙子'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-2.jpg',text: '冰刃幻境'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-3.jpg',text: '熾陽(yáng)神光'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-3.jpg',text: '神威'},{src: 'https://up.enterdesk.com/edpic/d6/be/a7/d6bea7953a832383937b5a95cb21bacb.jpg',text: '街頭霸王'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-2.jpg',text: '幸存者'},{src: 'https://up.enterdesk.com/edpic/80/e7/28/80e7287dfc378f23cd495bb2090d651f.jpg',text: '白龍吟'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-1.jpg',text: '冷暉之槍'},{src: 'https://up.enterdesk.com/edpic/c1/45/fc/c145fcb10e8ac99dd2cd94d686b602ee.jpg',text: '宮本武藏地獄之眼'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-3.jpg',text: '云間偶戲'},{src: 'https://up.enterdesk.com/edpic/f8/ea/79/f8ea79b40880e7b2eeeb31b81ff039f9.jpg',text: '蔡文姬天籟弦音'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-2.jpg',text: '午夜歌劇院'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-1.jpg',text: '無(wú)間傀儡'},{src: 'https://up.enterdesk.com/edpic/18/63/5d/18635de8c11372bb3f3820c4b5266c39.jpeg',text: '王昭君我是歌手'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-6.jpg',text: '飛衡'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-5.jpg',text: '逐夢(mèng)之影'},{src: 'https://up.enterdesk.com/edpic/79/34/a5/7934a552d1152c99554ab31ab7b2bc1d.jpg',text: '孫臏未來(lái)之旅'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-4.jpg',text: '白龍吟'},{src: 'https://up.enterdesk.com/edpic/20/0e/86/200e863afeadfb9a17620997651046eb.jpeg',text: '成吉思汗蒼狼末裔'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-3.jpg',text: '教廷特使'},{src: 'https://up.enterdesk.com/edpic/a3/a0/2c/a3a02c9814cae45f190bbee1db811da1.jpg',text: '蘭陵王刺客信條'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-2.jpg',text: '街頭霸王'},{src: 'https://up.enterdesk.com/edpic/8c/ec/73/8cec7372c5415d24d3a76a58fce0288a.jpg',text: '白起最終兵器'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-1.jpg',text: '國(guó)士無(wú)雙'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-4.jpg',text: '朱雀志'},{src: 'https://up.enterdesk.com/edpic/3e/e4/4e/3ee44e9f9c0fb551a31ff899e6ae829a.jpeg',text: '花木蘭傳說(shuō)之刃皮膚'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-3.jpg',text: '特工魅影'},{src: 'https://up.enterdesk.com/edpic/e0/dc/42/e0dc420df3f31fc1d045b9f26525e4b5.jpeg',text: '孫尚香薔薇玫瑰皮膚'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-2.jpg',text: '絕影神槍'},{src: 'https://up.enterdesk.com/edpic/0b/79/c3/0b79c31bbf32d0b41d35d83d2084d562.jpg',text: '達(dá)摩拳皇'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-1.jpg',text: '靜謐之眼'},{src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/163/163-bigskin-2.jpg',text: '修羅'}];總結(jié)
以上是生活随笔為你收集整理的瀑布流布局 js定位的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： CentOS安装配置freeIPA
- 下一篇： html中常见标签及其用法归纳大全