在直播軟體搭建中有哪些可以實現瀑布流的的方法?
介紹
正文
columns: column-width column-count;
<ul class="img-wrapper"> <li><img src="./image/1.jpg" alt=""></li> <!-- ... ... ... --> <li><img src="./image/20.jpg" alt=""></li></ul>
.img-wrapper{ column-count: 4; column-gap: 10px; counter-reset: count; width: 960px; margin: 0 auto;}.img-wrapper>li{ position: relative; margin-bottom: 10px;}
.img-wrapper>li>img{ width: 100%; height: auto; vertical-align: middle;}.img-wrapper>li::after{ counter-increment: count; content: counter(count); width: 2em; height: 2em; background-color: rgba(0,0,0,0.9); color: #ffffff; line-height: 2em; text-align: center; position: absolute; font-size: 1em; z-index: 2; left: 0; top: 0;}
.img-wrapper{ display: flex; flex-wrap: wrap; flex-direction: column; height: 1300px;}.img-wrapper>li{ position: relative; width: calc(100% / 4); padding: 5px; box-sizing: border-box;}
.img-wrapper>li:nth-child(4n+1){ order: 1;}.img-wrapper>li:nth-child(4n+2){ order: 2;}.img-wrapper>li:nth-child(4n+3){ order: 3;}.img-wrapper>li:nth-child(4n){ order: 4;}
import Waterfall from "./js/Waterfall" window.onload = new Waterfall({ $el: document.querySelector(".img-wrapper"), count: 4, gap: 10})
export default class Waterfall { constructor(options) { this.$el = null; // 父容器 this.count = 4; // 列數 this.gap = 10; // 間距 Object.assign(this, options); this.width = 0; // 列的寬度 this.items = []; // 子元素集合 this.H = []; // 儲存每列的高度方便計算 this.flag = null; // 虛擬節點集合 this.init(); } init() { this.items = Array.from(this.$el.children); this.reset(); this.render(); } reset() { this.flag = document.createDocumentFragment(); this.width = this.$el.clientWidth / this.count; this.H = new Array(this.count).fill(0); this.$el.innerHTML = ""; } render() { const { width, items,flag,H,gap } = this; items.forEach(item => { item.style.width = width + "px"; item.style.position = "absolute"; let img = item.querySelector("img"); if(img.complete){ let tag = H.indexOf(Math.min(...H)); item.style.left = tag * (width + gap) + "px"; item.style.top = H[tag] + "px"; H[tag] += img.height*width/ img.width + gap; flag.appendChild(item); } else{ img.addEventListener("load", () => { let tag = H.indexOf(Math.min(...H)); item.style.left = tag * (width + gap) + "px"; item.style.top = H[tag] + "px"; H[tag] += img.height*width/ img.width + gap; flag.appendChild(item); this.$el.append(flag); }) } }) this.$el.append(flag); }}
思考
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996194/viewspace-2795131/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 如何在直播軟體搭建中,實現圖片瀑布流效果?
- vue實現瀑布流Vue
- css實現瀑布流CSS
- 卡片瀑布流實現
- 原生 js 實現瀑布流佈局、React 版本的瀑布流佈局元件JSReact元件
- 瀑布流簡單實現
- 在鴻蒙中實現類似瀑布流效果鴻蒙
- jQuery實現瀑布流佈局jQuery
- 記錄:瀑布流最佳實現方案
- 流媒體軟體系統可實現哪些功能IPTV?
- 網路直播平臺搭建,瀑布流佈局完美解決方案
- 談談實現瀑布流佈局的幾種思路
- 直播軟體搭建,Android實現文字滾動播放效果Android
- 純CSS實現瀑布流,你會嗎?CSS
- Material Design之RecyclerView基本講解與瀑布流的實現Material DesignView
- 三維視覺化設計軟體,可以實現資料視覺化的軟體有哪些視覺化
- 直播軟體搭建,通過Android DrawerLayout實現側邊欄功能Android
- 【瀑布流】
- python集合中有哪些方法Python
- day122:MoFang:OSSRS流媒體直播伺服器&基於APICloud的acLive直播推流模組實現RTMP直播推流伺服器APICloud
- 可以翻譯ppt文件的軟體有哪些?
- Bootstrap實戰 - 瀑布流佈局boot
- 教你實現,搭建直播影片app原始碼的賬號體系APP原始碼
- 直播搭建中的流媒體傳輸系統的核心乾貨
- 直播軟體搭建,利用原生JS實現回到頂部以及吸頂效果JS
- 軟體是實現資料自動流動的核心
- 直播軟體搭建,canvas文字加粗Canvas
- 企業搭建直播平臺的實際作用有哪些
- 為了直播流暢,實現直播商城原始碼的轉碼原始碼
- HTML5如何實現菠菜軟體直播推流?值得學習一下!HTML
- Flutter簡單實現手寫瀑布流 第二篇Flutter
- 四款好用的免費直播編碼推流軟體
- 直播軟體搭建,vue路由跳轉的四種方式Vue路由
- 微信小程式實戰,基於vue2實現瀑布流微信小程式Vue
- 直播軟體開發,實現模糊搜尋的程式碼分析
- 淺談瀑布流
- Object中有哪些公共方法及作用Object
- 瀑布 敏捷與現實敏捷