jquery瀑布流的原理

• 什么是瀑布流，说话不形象，直接看图说话

![S55M%73LKAK_O@]OZ7D@MH.png](https://img.haomeiwen.com/i3361706/6f2520633110a1c3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 原来瀑布流就是长这样，虽然这个瀑布流有点丑陋，但是当你当你把图片中的方块换成图片，应该会很赞，同时随着你鼠标的滚动，图片会层次不齐的加载在页面上，形成像瀑布一样的流水效果
• 看完图后，想必你是对它很感兴趣，那咱不废话，直接说说原理把！

1. 你的视觉告诉你，啥子瀑布流，不就是每一列的宽度相等，每一列的宽度不相等，没什么了不起，战胜困难就要从战略上藐视它，小样瀑布流我们还搞不定，自从我们听了若愚大大的课，解决它简直是so easy ,piece of cake,
2. 来把，我才不怕你----破布流，枯燥的理论开始了
   -首先 外面一个打的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();
  
  })
  

代码题

task30

版权为饥人谷和作者所有，若转载请注明出处