JS原生方法實現瀑布流佈局_ZenDei技術網路在線

JS原生方法實現瀑布流佈局

-Advertisement-

html部分（圖片都是本地，自己需要改動圖片） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/one.css" ...

html部分（圖片都是本地，自己需要改動圖片）

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

css部分

margin: 0;

padding: 0;

}

#main{

position: relative;

}

.box{

padding: 15px 0 0 15px;

float: left;

}

.pic{

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 5px #ccc;

}

.pic img{

width: 300px;

height: auto;

}

js部分

window.onload = function() {

waterfall('main', 'box');

var dataInt={"data":[{"src":'003.jpg'},{"src":'022.jpg'},{"src":'025.jpg'},{"src":'006.jpg'},{"src":'007.jpg'},{"src":'019.jpg'},{"src":'020.jpg'},{"src":'010.jpg'}]}

window.onscroll=function(){

if (checkScrollSlide) {

var oParent=document.getElementById("main");

//將數據塊渲染到當頁面的尾部

for (var i=0;i<dataInt.data.length;i++) {

var oBox=document.createElement('div');

oBox.className='box';

oParent.appendChild(oBox);

var oPic=document.createElement('div');

oPic.className='pic';

oBox.appendChild(oPic);

var oImg=document.createElement('img');

oImg.src="img/"+dataInt.data[i].src;

oPic.appendChild(oImg);

}

waterfall('main', 'box');

}

function waterfall(parent, box) {

//將main下的所有的class為box的元素取出來

var oParent = document.getElementById(parent);

var oBoxs = getByClass(oParent, box);

// console.log(oBoxs.length);

//計算整個頁面顯示的列數（頁面寬/box的寬）

var oBoxw = oBoxs[0].offsetWidth; //獲得每一列的寬度

// console.log(oBoxw);

//獲取頁面的寬度除以每一列的寬度

var cols = Math.floor(document.documentElement.clientWidth / oBoxw);

//console.log(cols);

//設置main的寬

oParent.style.cssText = 'width:' + oBoxw * cols + 'px;margin:0 auto';

//聲明一個數組，存放每一列的高度

var hArr = [];

//遍歷所有的oBoxs

for(var i = 0; i < oBoxs.length; i++) {

if(i < cols) {

hArr.push(oBoxs[i].offsetHeight);

} else {

//求第一列box的最小的高

//藉助apply方法改變函數中this的指向，就是可以對數組取最小值

var minH = Math.min.apply(null, hArr);

var index=getMinhIndex(hArr,minH);//索引數組中高最小的那個

oBoxs[i].style.position='absolute';

oBoxs[i].style.top=minH+'px';

//oBoxs[i].style.left=oBoxw*index+'px';

oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';

hArr[index]+=oBoxs[i].offsetHeight;

}

console.log(hArr);

}

//根據class獲取元素

function getByClass(parent, clsName) {

var boxArr = new Array(); //用來存儲獲取到的所有的class為box的元素

oElements = parent.getElementsByTagName('*'); //獲得main下麵的所有的元素,形成一個數組

//遍曆數組oElements

for(var i = 0; i < oElements.length; i++) {

if(oElements[i].className == clsName) {

boxArr.push(oElements[i]);

}

return boxArr;

}

//getMinhIndex(hArr,minH);

//找到數組中最小數值的arr[i]

function getMinhIndex(arr,val){

for(var i in arr){

if (arr[i]==val) {//數組hArr[i]中的minH是最小值，此時的i就是我們想要的

return i;

}

//檢測是否具備了滾動條載入數據塊的條件

function checkScrollSlide(){

var oParent=document.getElementById('main');

var oBoxs=getByClass(oParent,'box');

var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+

Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);

var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;

// console.log(scrollTop);

var height=document.body.clientHeight||document.documentElement.clientHeight;

// console.log(height);

return (lastBoxH<scrollTop+height)?true:false;

}

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

org.apache.commons.lang.StringUtils中常用的方法

org.apache.commons.lang.StringUtils中常用的方法，這裡主要列舉String中沒有，且比較有用的方法： 1. 檢查字元串是否為空： static boolean isBlank(CharSequence str) 判斷字元串是否為空或null; static bool ...
Struts2初學習記錄

以下筆記內容來自尚矽谷_Struts2_佟剛老師的視頻教程+自己一點點整理一、 1. VS 自實現: 1). 搭建 Struts2 的開發環境 2). 不需要顯式的定義 Filter, 而使用的是 struts2 的配置文件. 3). details.jsp 比先前變得簡單了。屬性引用：${re ...
java-嵌套類

java允許在一個類中定義另外一個類，這就叫類嵌套。類嵌套分為兩種，靜態的稱為靜態嵌套類，非靜態的稱為內部類。使用嵌套類的原因：嵌套類也屬於類的成員，因此也可使用類成員的可視範圍控制修飾詞，內部類能夠使用其所在類的其他類成員，而靜態嵌套類則不能使用其所在類的其他類成員。靜態嵌套類與靜態方法與 ...
設計模式學習筆記（十六：橋接模式）

1.1概述將抽象部分與它的實現部分分離，使他們都可以獨立地變化。這就是橋接模式的定義。抽象類或介面中可以定義若幹個抽象方法，習慣上將抽象方法稱作操作。抽象類或介面使程式的設計者忽略操作的細節，即不必考慮這些操作是如何實現的，當用戶程式面向抽象類或介面時，就不會依賴具體的實現，使系統具有很好的擴展 ...
fcc的高級演算法題

核心提示：本部分一個9道題，給定時間50小時。屬於fcc前端學習的“高級編程腳本”題，對於初學者來說，確實算是“高級”了。如果只想著閉門造車，50小時確實也不過分。就題目設的坑和古怪規則來說，估計趕得上實際的情形。有些題目，可能要有一點數理基礎才行。 1.如果傳入字元串是一個有效的美國電話號碼，則返 ...
jquery動態插入行

這是一個利用jquery動態插入輸入內容的代碼。 html代碼： <div title="分表2" class="ui-edit" style="padding:20px;" > <div id="optionContainer" class="ftitle">經驗實體信息(必填，多個網商店鋪需加行 ...
js 將json字元串轉換為json兌現

在數據傳輸過程中，json是以文本，即字元串的形式傳遞的，而JS操作的是JSON對象，所以，JSON對象和JSON字元串之間的相互轉換是關鍵。例如：JSON字元串:var str1 = '{ "name": "cxh", "sex": "man" }'; JSON對象:var str2 = { "n ...
css+div常用屬性備忘錄

上大學學習軟體設計有一年多了，明年五月就要畢業了。回頭看看發現自己其實挺差勁的，不能因為在一群不學習的人中就覺得自己多厲害。其實自己也是個廢物呢:) 最近開通了博客所以就整理了一下筆記，在這裡發佈一下自己以前學習css時總是記不住去翻書又很常用的屬性，都是一些很基礎的，大神輕噴。很適合初學者多看看。 ...