瀑布流实现

实现原理

        function pubu() {
            //创建6个数组.即列数
            var counts = parseInt($('.ct').width() / $('.item').outerWidth(true));//可能是6
            //数组遍历赋值
            var itemArray = [];
            for (var i = 0; i < counts; i++) {
                itemArray[i] = 0;
            }
            //遍历.item:取数组里值最小值
            $('.item').each(function () {
                var minValue = Math.min.apply(null, itemArray)
                //取数组里值最小值对应索引.
                var minIdx = itemArray.indexOf(minValue);//拿到所在的第几列idx,用来计算left.
                //css赋值
                $(this).css({
                    left: $(this).outerWidth(true) * minIdx,
                    top: minValue//第91行保存的6组数据的最小值作为当前top值.
                    // top: itemArray[minIdx]
                })
                //高度赋值给itemArray[]
                itemArray[minIdx] += $(this).outerHeight(true);
                //关键:保留高度,把高度值放入数组里.下次排列再拿出来比较高度,取最高度最小的作为放置点.
            })

预览

代码