css3屬性之多欄布局與JS實現瀑布流
背景:之前打算自己總結一下flex布局的知識點,發現自己無從下手,原因在何處:我反思了一下,其實原因很簡單,使用的次數少,更多的時間使用了百分比,浮動和定位解決。這也就顯示出了博客和筆記的區別,自己平時做筆記,更多的記錄,而不是總結,其實自己沒有熟練掌握。
有的時候甚至出現了這樣的筆記:
我打算堅持寫博客,不論自己總結有多么差勁,也要堅持寫,哪怕幾年后我看到以前的筆記,自己會偷偷笑出聲。想想原來大一時的技術還是那樣的稚嫩啊。
Css3多列
1)首提的兼容性問題:IE10以及opera支持多列(column),chrome需要-webkit-前綴,Firefox需要-moz-的前綴,Ie9以及更早版本就不支持多列了。你可以使用這個工具,很方便的查看你的瀏覽器內核以及版本信息http://ie.icoa.cn/
2)Css3多列屬性:css3多列主要是五個屬性
column-count <規定元素被分隔的列數>
column-gap <規定列與列之間的間隔>
column-rule <列之間的寬度、樣式、顏色>
column-width <列的寬度>
column-span <元素應該橫跨的列數>
注意:在設置column-width寬度時,同時設置盒子的width,否則寬度默認為100%,每欄寬度按欄數平均分;盒子每欄寬度必須大於等於column-width設定的值,否則就會減少欄數來增加每欄寬度
css3多列和JS實現瀑布流
給自己安利一波吧,看到網上很多瀑布流的效果,哇,簡直棒極了有沒有;於是我迫不及待的打開vpn,打開了pinterest的官網。
自己也梳理梳理邏輯:<在寫js代碼之前,一定要先搞清邏輯,再動手寫代碼>
我們都不陌生瀑布流是同寬的,但是高度不一,js主要的工作就是根據高度來進行布局,
1)當一行排滿后,准備排第二行的時候,把第一個圖片放到上一行圖片高度最小處,以此類推,
另外有一點就是自動加載,這里我做一個條件來判斷是否加載,
2)當最后一個的元素距離網頁頂部的高度(offsetTop)+ 這個元素高度的一半 < 垂直方向上滾輪的量(scrollTop) + 網頁可見區域的高 時:
我們就加載圖片(這里我沒有用ajax請求,我用了一個json數組來模擬json數據)
要搞清楚offsetTop、scrollTop、clientHeight這些的具體含義:可以參考前輩的博客。
梳理完邏輯,讓我們動手寫代碼吧:
html比較簡單,這里圖片我用了placehold的圖片占位符,如果你沒有很好的素材,這也許是個不錯的選擇
<body> <div class="main clearfix" id="main"> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x200"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x200"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x150"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x200"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x200"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x200"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x100"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x150"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x200"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> </div>
css用了多列的column-width和column-gap屬性
* { margin: 0; padding: 0; } .clearfix:after, .clearfix:before { content: ""; display: table; } .clearfix:after { clear: both; } .main { position: relative; -webkit-column-width: 210px; -webkit-column-gap: 5px; -moz-column-gap: 5px; } .box { float: left; padding: 15px 0 0 15px; } .box .pic { width: 200px; height: auto; padding: 10px; border-radius: 10px; box-shadow: 0px 0 5px #ccc; } .box .pic img { display: block; width: 100%; }
梳理完了邏輯,該動手寫js了
window.onload = function () { waterfall('main', 'box'); var ImgJson = { 'data': [ {'src': 'http://placehold.it/200x300'} ] }; //監聽scroll事件 window.onscroll = function () { var isPosting = false; if (checkScrollSlide('main', 'box') && !isPosting) { var oParent = document.getElementById('main'); for (var i in ImgJson.data) { var oBox = document.createElement('div'); oBox.className = 'box'; oBox.innerHTML = '<div class="pic"><img src="' + ImgJson.data[i].src + '"></div>'; oParent.appendChild(oBox); } isPosting = false; waterfall('main', 'box'); } } }; function waterfall(parent, clsName) { //獲取元素 var oParent = document.getElementById(parent); //獲取所有box var aBoxArr = oParent.getElementsByClassName(clsName); //單個box的寬度 var iBoxw = aBoxArr[0].offsetWidth; //列數 var cols = Math.floor(document.documentElement.clientWidth / iBoxw); oParent.style.cssText = 'width:' + iBoxw * (cols + 1) + 'px;margin:0 auto;'; //儲存所有高度 var hArr = []; for (var i = 0; i < aBoxArr.length; i++) { if (i < cols) { hArr[i] = aBoxArr[i].offsetHeight; } else { //獲取hArr的最小值 var minH = Math.min.apply(null, hArr); //hArr最小值索引index var minHIndex = getMinHIndex(hArr, minH); aBoxArr[i].style.cssText = 'position:absolute;top:' + minH + 'px;left:' + aBoxArr[minHIndex].offsetLeft + 'px'; //添加元素之后更新hArr hArr[minHIndex] += aBoxArr[i].offsetHeight; } } } //獲取最小索引值 function getMinHIndex(arr, val) { for (var i in arr) { if (arr[i] == val) { return i; } } } //檢查是否滿足加載數據的條件 function checkScrollSlide(parent, clsName) { var oParent = document.getElementById(parent); var aBoxArr = oParent.getElementsByClassName(clsName); //最后一個box元素的offsetTop+高度的一半 var lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var height = document.documentElement.clientHeight || document.body.clientHeight; return lastBoxH < scrollTop + height; }
最后走一波效果圖