今天抽空再寫一篇，寫個瀑布流的效果。做過ios的都知道瀑布流在ios中也是個很流行的布局方式，這裡就不再多介紹了。我們來看看如何用js來實現瀑布流的效果。
我就直接上**了，裡面的注釋都很清晰。不懂的可以來問我。
html：
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var
#main
#main .box
#main .box .pit
#main .box .pit img
/**
* created by huminghao on 2017/7/5.
*/function $(id)
// 當頁面載入完畢
window.onload = function () , ,,,,,,,,,,,,,,,,,,]}
for (var i = 0; i < dataimg.data; i ++) }}
}// 實現瀑布流
function waterflow(parent, box) {
// 讓所有盒子的父標籤居中
// 1.拿到所有的盒子
var allboxs = $(parent).getelementsbyclassname(box);
// 2.拿到其中乙個盒子的寬度
var boxwidth = allboxs[0].offsetwidth;
// 3.求出頁面的寬度
var screenwidth = document.body.clientwidth;
// 4.求出列數
var clos = math.floor(screenwidth / boxwidth);
// 5.讓父標籤居中
$(parent).style.csstext = 'width: ' + clos * boxwidth + 'px; margin: 0 auto';
// 定位
// 定義乙個高度陣列
var heightarray = ;
// 遍歷
for (var i = 0; i < allboxs.length; i ++) {
// 求出所有盒子的高度
var boxheight = allboxs[i].offsetheight;
if (i
iOS 實現 瀑布流介面
前陣子需要做乙個需求，在iphone上實現瀑布流效果。第一眼看到這個需求，我想到的兩種解決方案分別是 1.使用多個uitableview，然後控制它們同時滾動 2.使用乙個uiscrollview，然後參考uitableview的實現自己做乙個符合需求並且以後可以重用的控制項。我首先嘗試了第乙個方案...
JS實現的瀑布流
js實現的瀑布流 首先用html和css實現瀑布流的布局 如下圖，為了讓js可以獲得盒子offsetleft等最好讓盒子使用padding分開之間的距離，首先外面得有兩層盒子，內層用來設定大盒子與之間的距離 給pic設定padding 外層用來設定每個大盒子之間的距離 給box設定padding l...
js原生實現瀑布流
1.確定瀏覽器顯示區域內，一行放多少列盒子 寬度一致，高度由內容撐開 1.1 獲取頁面寬度 1.2 獲取盒子寬度 1.3 顯示的列數 頁面寬度 盒子寬度 2.確定列數之後，先排列第一行 2.1 顯示的列數 頁面寬度 盒子寬度 間隙 2.2for迴圈裡判斷 當i 盒子的索引 小於column 列數 的...