自適應瀑布流

阿新 • • 發佈：2018-12-10

var data = ["img2/1.jpg","img2/3.jpg","img2/5.jpg"]; window.onload = window.onresize = function(){ var oWrap = document.getElementById("wrap"); var aItems = oWrap.children; //取總寬度 var totalWidth = oWrap.offsetWidth; //單個區塊寬度

var perWidth = aItems[0].offsetWidth; //一行的列數 var cols = Math.floor(totalWidth/perWidth); //區塊的間距 var mt = ml = 10; //排第一行區塊的位置 //儲存每一列高度的陣列 var arrHei = []; for(var

i = 0; i < cols; i++){ aItems[i].style.top = 0; aItems[i].style.left = (perWidth+ml)*i + "px"; arrHei.push(aItems[i].offsetHeight); } //排剩餘的區塊 conPos(cols); function conPos(startNum)

{ for(var i = startNum; i < aItems.length; i++){ aItems[i].style.left = aItems[getMinIndex(arrHei)].style.left; aItems[i].style.top = arrHei[getMinIndex(arrHei)] + mt + "px"; //拍完一個之後，更新陣列 arrHei[getMinIndex(arrHei)] += aItems[i].offsetHeight + mt; } } //定義一個取最小值索引的方法 function getMinIndex(arr){ var minVal = Math.min.apply(null,arr); var minIndex = arr.indexOf(minVal); return minIndex; } //實現資源持續載入 var ch = document.documentElement.clientHeight; window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(arrHei[getMinIndex(arrHei)]<ch+scrollTop){ var str = ""; data.forEach(function(item){ str += `<div><img src="${item}"></div>`; }) oWrap.innerHTML += str; //對新插入的資料排序 conPos(aItems.length-data.length); } } }

自適應瀑布流

自適應瀑布流

靜態、自適應、流式、響應式

iOS開發之窺探UICollectionViewController(三) ：使用UICollectionView自定義瀑布流

iOS開發之窺探UICollectionViewController(四) --一款功能強大的自定義瀑布流

HTML網頁佈局：靜態、自適應、流式、響應式

深入理解各種佈局方式：靜態，自適應，流式，響應式，彈性

自定義瀑布流的佈局

靜態、自適應、流式、響應式等佈局的區別

靜態、自適應、流式、響應式四中佈局的區別

iOS開發UI篇—自定義瀑布流控制元件（蘑菇街資料重新整理操作）

IT 移動端：足跡第三十五步：靜態、自適應、流式、響應式四種HTML網頁佈局的區別（哪種佈局在移動端最好用）

5.Sentinel原始碼分析—Sentinel如何實現自適應限流？

javascript自適應寬度的瀑布流實現思路

[置頂] RecyclerView實現瀑布流，圖片自適應高度

RecyclerView實現瀑布流，圖片自適應高度

靜態布局、自適應布局、流式布局、響應式布局、彈性布局等的概念和區別

靜態布局、自適應布局、流式布局、響應式布局、彈性布局簡析

詳細分享UICollectionView的自定義布局(瀑布流, 線性, 圓形...)

頁面布局的幾種方式（靜態化布局，流式布局，自適應布局，響應式布局，彈性布局）

Xamarin自定義佈局系列——瀑布流佈局

自適應瀑布流

相關推薦