說明

• 源代碼

---

1. 瀑布流

• 出現(xiàn)問題: 設(shè)計給的圖片不是同一個尺寸大小,因此不能規(guī)則的放入到給定的DOM結(jié)構(gòu)中.此時,需要使用瀑布流技術(shù)來解決這個問題

• 解決的思路: 讓圖片等寬、不等高

• 核心: 用到了定位

img {position: absolute;left: 最小的索引 * 圖片的寬度;top: 最小的圖片的高度; }

• 算法如下:

首先獲取瀏覽器的寬度w,用w除以圖片盒子的寬度向下取整記為列數(shù): col

利用數(shù)組,保存每一列當前的高度

如果是第一行,則將圖片的高度保存在數(shù)組arr中

如果不是第一行,取出arr中的最小值和索引,計算出絕對定位的位置.并給圖片設(shè)置絕對定位

1.1 用到的API

1.1.1 獲取當前屏幕的寬度

• 由于每個圖片盒子還有對應(yīng)的高度,因此獲取的時候,還要獲取內(nèi)邊距.
• 在jquery中,可以通過$().outerWidth實現(xiàn)

var screenWidth = $(window).outerWidth()

1.1.2 給DOM元素加css樣式

$().css({position: 'absolute',left: currLeft,top: currTop })

1.1.3 總體代碼

• 總體代碼如下:

$(function() {waterFall() }) function waterFall() {// 獲取盒子var box = $('.box')// 1. 求出對應(yīng)得列數(shù)// 1.1 得到當前屏幕的寬度var screenWidth = $(window).outerWidth()// 1.2 獲取每張圖片的寬度var boxWidth = $('.box').outerWidth()// 1.3 獲取當前的列數(shù)var col = Math.floor(screenWidth / boxWidth)// 2. 創(chuàng)建數(shù)組,記錄當前列數(shù)的高度var arr = []for (var i = 0; i < col; i++) {arr.push(0)}// 3. 遍歷盒子中的圖片$.each(box, function(index, value) {// 得到每一張圖片的高度var thisHeight = $(this).height()if (index < col) {// 如果是第一行將高度的存入數(shù)組中.arr[index] = thisHeight} else {// 如果不是第一行,找到數(shù)組中最小的高度和索引var currMinHeight = Math.min.apply(arr, arr)var currMinIndex = arr.indexOf(currMinHeight)// 算出距離 左側(cè)/上側(cè) 的距離var currLeft = currMinIndex * boxWidthvar currTop = currMinHeight// 將當前的圖片變?yōu)榻^對定位,放在盒子中$(this).css({position: 'absolute',left: currLeft,top: currTop})arr[currMinIndex] = currMinHeight + thisHeight}}) }

總結(jié)

以上是生活随笔為你收集整理的javascript --- 瀑布流的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。