原生 js 實現面對物件版瀑布流

2021-09-13 02:23:53 字數 2726 閱讀 5841

寫**之前大概列了一下需求，然後中間又加上了一些其他功能，最終的需求如下：

完整**

頁面預覽

起乙個自執行函式，只需要暴露乙個 falls 變數，該變數指向乙個包含 init 方法的物件；

init 方法有2個引數：

- el：瀑布流的容器的選擇符


- options：其他引數
ps: 這裡還用到了乙個自定義的 extend 方法，用於合併預設屬性以及自定義屬性物件，怕被說相容性不好就沒有用 es6 語法，參照 object.assign 方法，完整**裡也有，此處不多介紹；

var falls = (function () ;


var falls = function (el, options) ;


var prototype = falls.prototype;


var init = function (el, options) ;


return 


})();
接下來確定一些可以定義的屬性：
- width: （外容器）的寬度


- colspace: 列間距


- rowspace: 行間距


- itemclass: 外容器類名，方便修改邊框、陰影等樣式
根據這些屬性，隨手確定了各項預設值

var defaults = ;
定義 falls 建構函式，最終該建構函式有以下初始屬性（屬性在後面用到再做解釋）：
var falls = function (el, options) ;
在新增原型方法之前：
var prototype = falls.prototype;
這樣可以少寫好多字母呢，真棒！！！

3.4.1 初始化 initialize 方法

prototype.initialize = function () ;
這裡定義了根元素 rootel ,並給它新增了相對定位及 margin 屬性，這樣整個根元素會在容器中水平居中。

3.4.2 瀑布流載入 loadfalls 方法

這裡有一些前置屬性及初始邏輯
prototype.loadfalls = function ()  else 


}};
以**空行來拆分：

3.4.3 生成高度列表 storageheight 方法

prototype.storagetop = function () )


}this.toparr = toparr;


};
3.4.4 新增佇列 additem 方法
prototype.additem = function () 


}var item = document.createelement('div');   // 建立包裹元素


item.style.position = 'absolute';


item.style.top = top + 'px';


item.style.left = toparr[index].left + 'px';


item.style.width = _this.width + 'px';


item.style.boxsizing = 'border-box';


item.classlist.add(_this.itemclass);


var img = document.createelement('img');    // 建立元素


img.style.width = '100%';


img.src = current.src;


img.alt = current.alt;


img.onload = function ()  else  else }};


})();


};
這一塊有點長，因為有兩處為 dom 物件新增屬性，主要邏輯如下：

只有在載入完成後才能獲取高度，進行 toparr 的更新
3.4.5 監聽寬度變化 bindevent 方法
prototype.bindevent = function () ;
為 window 物件的 resize 事件新增監聽，觸發 loadfalls 函式，這裡通過bind修正了方法內部的 this 指向；

3.4.6 生成乙個瀑布流例項 init 方法

prototype.init = function () ;
3.4.7 新增後重新繪製 addimgreload 方法
prototype.addimgreload = function (arr)  else )


}};
上面為了這一步做了很多鋪墊

通過 addimgreload 方法分次跟新屬性可以實現懶載入
**寫完沒有做優化，有幾段比較長，有空再優化吧，畢竟快下班了

最後，個人能力有限，歡迎大佬補充，謝謝！！！

js原生實現瀑布流

1.確定瀏覽器顯示區域內，一行放多少列盒子 寬度一致，高度由內容撐開 1.1 獲取頁面寬度 1.2 獲取盒子寬度 1.3 顯示的列數 頁面寬度 盒子寬度 2.確定列數之後，先排列第一行 2.1 顯示的列數 頁面寬度 盒子寬度 間隙 2.2for迴圈裡判斷 當i 盒子的索引 小於column 列數 的...

瀑布布局流 原生js

首先html和css 然後單單左浮動是不會 插空 插入的，這裡就是我們的重點啦。首先 都是要絕對定位的。確定好乙個頁面有多少列，每插入一張就計算每一列的高度，取最短的那列插入，計算該插入的top和left再賦值，絕對定位定在那裡，就ok啦 function wate ll parent,pin el...

原生js寫瀑布流

準備用自學的jquery寫的，但是不熟悉api，忘得乾乾淨淨了，然後我覺得我直接用js寫比用jquery還要簡單一點 這是html布局 js 1.獲取視口的寬度，獲取每個的寬度 2.遍歷迴圈每個 3.設定top和left top 第一行設定為0,第二行開始 最小高度 left i imgw 必須等所...