**片段示列:
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 ...