- 什么是瀑布流,说话不形象,直接看图说话
![S55M%73LKAKO@]OZ7D@MH.png](http://upload-images.jianshu.io/upload_images/3361706-6f2520633110a1c3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 原来瀑布流就是长这样,虽然这个瀑布流有点丑陋,但是当你当你把图片中的方块换成图片,应该会很赞,同时随着你鼠标的滚动,图片会层次不齐的加载在页面上,形成像瀑布一样的流水效果
- 看完图后,想必你是对它很感兴趣,那咱不废话,直接说说原理把!
- 你的视觉告诉你,啥子瀑布流,不就是每一列的宽度相等,每一列的宽度不相等,没什么了不起,战胜困难就要从战略上藐视它,小样瀑布流我们还搞不定,自从我们听了若愚大大的课,解决它简直是so easy ,piece of cake,
- 来把,我才不怕你----破布流,枯燥的理论开始了
-首先 外面一个打的div包裹,position:relative;里面的div position:absolute;这是为了有利于用JS来操作他们的top、left来更改他们的位置,同时把这些新建一个空数组来遍历它们后,一列为数组的一个元素,来设置它们的位置。
第二步, 我们先把一行放满,看看到底一行能摆几个,用这个公式就可以了:一行能摆的数量=窗口可视区域的宽度/一个div的宽度,由于我们给每个div设置了margin,所以获取元素的宽度时,应该使用 var $itemWidth=$('.item').outerWidth(true),它获取的是宽度=content宽度+padding宽度+border宽度+margin,而不是width().
第三步,我们开始来摆放每个div把,我们会发现第一行没有什么问题,依次摆放即可,可是到了第二行,每一行的高度不一,我该把它放在哪了,没事,有规律可循:这时,第二行的第一张应该放在页面上高度最小的div,同时,下一个div总是和当前队列中高度最小的下面,依次如此,即,div的水平方向距离为=div数组索引号*div固定宽度,,div垂直方向距离=div数组索引号对应的值(即当前列的图片高度之和)。div摆放后更新当前列的所有图片总高度。
注意:第三步你也可以理解为,给定一个数组,在该数组中找出成员最小值和该成员在数组中的索引号。
举个例子来说:有一排人站在你面前,现在让你在它们中找个最矮,正常人都会这么想,我先假设这群人的第1个人是身高最矮的,然后我拿第1个人的身高和第2人的身高比较,若是要是第1个人的身高最矮,就继续认为第1个人最矮,若是第2人身高更矮,我就扔了第1个人,拿第2个人继续按照这个方法比较,最后肯定能找到里面个子最矮的。
也就是:首先假定数组中某个值为最小值,然后用for循环遍历数组中的所有成员和假定最小值比较,如果某数组成员的值小于假定值,则获取将该值(colSumHeight[i])和对应的索引号(i)
第四步:设置初始状态数组,数组长度等于当前一行能摆放的图片数,该数据记录每行中每张图片的高度,数组的索引号记录图片在每行上第几列的位置。每张图片摆放后,修改数组内对应索引号成员的值(即当前列的高度之和)
-
破布流原理到此结束,下面是详细的JS代码,有兴趣的看官可以看看
$(function(){ var waterfall=(function($){ function render(){ //获取div元素的宽度 var elWidth=$('.item').outerWidth(true), //计算得到一列放置div的数量 colNum=parseInt($(window).width()/elWidth), //设置空数组,来存放每一列div的高度 colSumHeight=[]; //遍历空数组,添加元素,并把每一列div的高度设置为0 //等同于colSumHeight=[0,0,0,0,0] for(var i=0;i<colNum;i++){ colSumHeight.push(0); } //遍历所有的div,通过在函数计算出每一列的高度 //找出高度之和最小的一列div,接着一次按照这个方法 //把所有的div摆放完毕 $('.item').each(function(){ var $cur=$(this); var idx=0, minSumHeight=colSumHeight[0]; for(var i=0;i<colSumHeight.length;i++){ if(colSumHeight[i]<minSumHeight){ idx=i; minSumHeight=colSumHeight[i]; } } $cur.css({ left:idx*elWidth, top:minSumHeight }); colSumHeight[idx]=$cur.outerHeight(true)+colSumHeight[idx]; }) } render() //当浏览器窗口缩放时,重新放置计算一列放置div的数量 $(window).on('resize',function(){ render(); }) return{ init:render } })(jQuery) waterfall.init(); })