實現(xiàn)原理

        function pubu() {
            //創(chuàng)建6個數(shù)組.即列數(shù)
            var counts = parseInt($('.ct').width() / $('.item').outerWidth(true));//可能是6
            //數(shù)組遍歷賦值
            var itemArray = [];
            for (var i = 0; i < counts; i++) {
                itemArray[i] = 0;
            }
            //遍歷.item:取數(shù)組里值最小值
            $('.item').each(function () {
                var minValue = Math.min.apply(null, itemArray)
                //取數(shù)組里值最小值對應(yīng)索引.
                var minIdx = itemArray.indexOf(minValue);//拿到所在的第幾列idx,用來計算left.
                //css賦值
                $(this).css({
                    left: $(this).outerWidth(true) * minIdx,
                    top: minValue//第91行保存的6組數(shù)據(jù)的最小值作為當前top值.
                    // top: itemArray[minIdx]
                })
                //高度賦值給itemArray[]
                itemArray[minIdx] += $(this).outerHeight(true);
                //關(guān)鍵:保留高度,把高度值放入數(shù)組里.下次排列再拿出來比較高度,取最高度最小的作為放置點.
            })

預(yù)覽

代碼