簡易實用 源生js瀑布流示列

2021-09-25 05:49:27 字數 850 閱讀 3895

**片段示列:

1.沒有做封裝,簡單版本

**片段說明:

建立兩個陣列

如:harr --> 儲存列的高度值,每個值初始化為0,避免下面迴圈時做為空等判斷。

這個列可根據多少螢幕寬度自己自定義吧。 

每列展示多少個即可算出每個li.item的寬度,並賦值。

如:this.itemlist ---> 展示的li, 這個是操作li的

迴圈itemlist 目的->賦值操作每個列的 left , top 。 

left,top從**來 --> harr中來。第二行的第一張圖要放在第一行的最小那一列的下方, 所以此處要先找harr中的最小高度值,會得到它的索引。left = j * 它的寬度 ,top = harr[j]

每一次迴圈的找到的最小高度值,要進行『更新』,需要重新賦予新的高度值(也就是插入進瀑布流的高度值)。

總結:① 取最小高度值 (要放的哪一張圖下面)

② 設定left,top值 (根據第一步得到的)

③ 賦值 (更新 harr,插入的那張的高度)

2.有幾個需要注意的地方:

① this.itemlist[i].style.width = itemwidth + "px";

設定每個li.item的寬度,請在之前就設定好,不然下面獲取的clientheight 不準確 (因為寬高度是img跟裡面的內容撐開的,img的寬度是100% ,會等比縮放的。)

② var bol = true;

harr 這個陣列,用來儲存li.item的高度值的,好找最小高度值,考慮到最小高度值可能有一樣的,那麼取第乙個就好,也就是說,找到了直接false即可。

源生JS實現點選複製功能

之前在工作中,有位同事問過我乙個問題,js如何實現點選複製功能。給他解決後現在來總結歸納一下,順便做個筆記。ps 此乃本人第一篇部落格 跟著同事大佬學習 涉及知識尚淺,如有任何意見和建議請告知於我。下面開始正文 doctype html html head meta charset utf 8 ti...

pip換源簡易方法

pip換源簡易方法 安裝pqi pip install pqi 列出pip源 pqi ls 使用pip源 pqi use 例子,比如執行pqi use tuna即把當前pip源改為清華的pip源 顯示當前pip源 pqi show 新增新的pip源 如新增ustc源 移除pip源 如官方pypi源 ...

js簡易日曆

該功能最終實現的結果如下圖所示 程式實現思路 1 使用for,實現滑鼠懸浮中英文切換 2 底部文字切換,使用tab選項卡思路,動態陣列獲取文字 3 底部文字的切換使用innerhtml 注意以下幾點 1 頁面布局,注意active狀態是在li上新增,jan fer2 字串的拼接 例如 abg 12 ...