*
img#main
/*大盒子box是滿的,用padding做間距*/
.box
.box img
/*小盒子pic也是滿的,依舊用padding做間距*/
.pic
(
function
(w),
scroll:
function()
;}else
if(document.compatmode ===
"css1compat");
}else;}
}};}
)(window)
;//將tool綁到window裡
window.
addeventlistener
('load'
,function
(ev),,
,,,,
,];//遍歷資料,建立盒子
for(
var i =
0; i < dataa.length; i++
)//重新瀑布流布局
waterfull
('main'
,'box');
}},200)}
);//頁面尺寸發生改變重新布局
/* 因為尺寸改變的非常頻繁,但是又不需要時時刻刻都去布局,只要到指定位置布局就行
所以要做個節流
*/var timer=
null
; window.
addeventlistener
('resize'
,function()
,200);
})})
;/**
* 實現瀑布流布局
* @param parent
* @param child
*/function
waterfull
(parent, child)
else}}
function
getindex
(arr, val)}}
function
check()
JS瀑布流特效(還未完全完成)
由於只是做樣式我就沒有使用很多 由於我的大小 太不一,直接就使用了行內樣式來修改 特效分析 找到第一行中高度最小的以後 把第二行的第一張接在剛才最小的下面 由於設定了定位 所以只需要設定後面的top值和left值 最後及時更新最小的長度 不然沒啥用 本來還要設定滾動以後,繼續載入的特效,但是我還沒寫...
iOS學習筆記 瀑布流封裝
最近學習了瀑布流布局,是用collectionview實現的。首先說說設計思路,用collectionview做出來的瀑布流是固定行數或者列數的。以現在主流固定列數為例,每個item就是固定寬,不固定高,同時每個item之間的間距是固定的,那麼每行的y值計算就需要通過前一行的最短的item來確定。既...
ajax學習筆記之瀑布流
此為列數固定的瀑布流 就是無論放大縮小瀏覽器百分比 列數不變 是比較簡單的版本 學習用 這篇只是適合我自己記憶的筆記 可能不是適合所有人 隨意看看就好 布局很簡單 就是乙個ul下4個li 個數可隨意 主函式部分 請求來的資料data格式是乙個陣列中包含了多個物件 乙個物件既包含了src和寬高和介紹等...