原生射流研究…实现响应式瀑布流布�

原生射流研究…实现的瀑布流布局，代码及演示代码地址：https://github。com/leozdgao/responsive _瀑布

演示：http://leozdgao。github。io/演示/响应_瀑布/

演示图：

核心代码：

响应式_瀑布。射流研究…

(函数(){ var瀑布=function(opts){ var min box width；object . defineperproperty(此为，' minBoxWidth '，{ get : function(){ return minbox width；}，set:函数（值){ if(值100)值=100;如果（值1000)值=1000;minBoxWidth=值；} });opts=opts | | { }；var containers elector=opts。容器选举人| | ' .wf-container '；var BoxSelector=opts。BoxSelector | | ' .wf-box '；//初始化此属性。minbox width=opts。minbox宽度| | 250；这个。columns=[]；这个。容器=文档。queryselector(容器选择器)；这个盒子=这个容器？数组。原型。切片。叫(这个。集装箱。query selectorall(BoxSelector)):[]；//在构造函数this.compose()中编写一次；//处理加载var images=这个。集装箱。queryselectorall(' img ')后可能会改变大小的图像或东西，即=this var clr for(var I=0；一。图像。长度；I){ var img=images[I]；img。onload=function(){ if(clr)clear time out(clr)；clr=setTimeout(function(){ that。撰写(true))；}, 500);} }窗口。addeventlistener(' resize '，function(){ that。compose()；});} //计算当前设置下的列数瀑布。原型。computenumberofcolumns=function(){ var num=math。地板(这个。集装箱。客户端宽度/这个。minbox宽度)；num=num | | 1；//至少有一列返回num} //初始化足够的列并设置宽度瀑布。原型。initcolumns=function(num){ if(num 0){//创建列设计这个。columns=[]；var width=(100/num)' % '；while(num-){ var column=document。创建元素(' div ')；列。类名=' wf-column '；列。风格。宽度=宽度；这个。列。推(列)；this.container.appendChild(列);} } } //获取最短列瀑布。原型。getminHathIndex=function(){ if(this。列这个。列。长度0){ var min=this。列[0].clientHeight，索引=0;for(var I=1；我喜欢这个。列。长度；I){ var列elem=this。列[I]；elem列。客户高度最小值){最小值=立柱高度。客户身高；索引=我；} }返回索引；} else return-1；} //撰写核心瀑布。原型。compose=function(force){ var num=this。computenumberofcolomns()；var cols=这个。列。长度；if(force || num！=cols) { //删除(var I=0；我喜欢这个。列。长度；I){ var列elem=this。列[I]；列elem。移除()；}//初始化新列。初始化列(数量)；//为(var i=0，l=这个。盒子。长度；我。I){ var box=这个。方框[一]；这个。AddBox(box)；} } } //向网格瀑布。原型。add box=function(elem){//push if new box if(this。盒子。(elem)0)的索引。盒子。push(elem)；var列索引=这个。getmingharsindex()；如果(专栏索引-1){ var列=this。列[专栏索引];列。appendchild} }窗口。瀑布=瀑布；})()以上所述就是本文给大家分享的全部内容了，希望能够对大家熟练使用爪哇岛描述语言有所帮助。