2. 程式人生 > 其它 >js多個元素隨機擺放

js多個元素隨機擺放

阿新 • • 發佈：2022-03-22

效果：

 

 

程式碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover"> <title>js多個元素隨機且不重疊分佈在頁面中</title> <script> //計算根節點HTML的字型大小 function resizeRoot(width) {
    var deviceWidth = document.documentElement.clientWidth,         num = width,         num1 = num / 100;     if (deviceWidth > num) {         deviceWidth = num;     }     document.documentElement.style.fontSize = deviceWidth / num1 + "px"; } //根節點HTML的字型大小初始化 resizeRoot(750);   window.onresize = function () {
    resizeRoot(750); }; </script> <style> *{margin:0;padding:0;} .demo{height:5rem;position:relative;} img{width:.8rem;height:.8rem;position:absolute;border-radius:50%;} </style> </head> <body>     <div class="demo"></div>     <script>         createBubble(10);   //初始化氣泡
        function createBubble(num){             var iconWidth = 60;   //值越大，元素左右間隔越大             var iconHeight = 60;  //值越大，元素上下間隔越大             var targetHeight = document.querySelector(".demo").offsetHeight;             var targetWidth = document.querySelector(".demo").offsetWidth;                         var _tmpArray = [];             var html = '';             //當放置的元素的寬高大於瀏覽器視窗的寬高時，直接返回             if(targetWidth < iconWidth || targetHeight < iconHeight){                 return false;               }                         var xNum = parseInt(targetWidth / iconWidth, 10);    //用瀏覽器的寬度除以一個元素的寬度可算出瀏覽器視窗內一行可以放置元素的個數             var yNum = parseInt(targetHeight / iconHeight, 10);  //用瀏覽器的高度除以一個元素的高度可算出瀏覽器視窗內一列可以放置元素的個數             var allNum = xNum * yNum;   //瀏覽器視窗內總共可以放置元素的個數             //當需要放置的元素的個數超過瀏覽器視窗內總共可以放置的元素的個數時，則返回             if(num >= allNum){                 return false;             }                       for(var i = 0; i < allNum; i++){                 _tmpArray.push(i);             }               var xStart = 0, yStart = 0;               while(num){                 var pointer = Math.floor(Math.random() * allNum);    //向下取整取出0到allnum之間的任意一個整數                 //如果陣列_tmpArray中不存在第pointer值，則繼續                 if(!_tmpArray[pointer]){                     continue;                 }                                 delete _tmpArray[pointer];   //刪除陣列_tmpArray中第pointer個值                 yStart = parseInt(pointer / xNum, 10) * iconWidth;                 xStart = (pointer % xNum) * iconHeight;                   html += "<img src='http://tp1.sinaimg.cn/1642634100/50/5613120647/0' style='top:" + yStart + "px;left:" + xStart + "px'/>";                 num--;             }             document.querySelector(".demo").innerHTML = html;         }     </script> </body> </html>    

參考連結：https://blog.csdn.net/weixin_34378922/article/details/93432361

相關推薦

js多個元素隨機擺放

效果：     程式碼： <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\" />

js多個(N)個數組的的元素組合排序演算法

現在有一批手機，其中顏色有［\'白色\',\'黑色\',\'金色\',\'粉紅色\'］；記憶體大小有［\'16G\',\'32G\',\'64G\',\'128G\'］，版本有［\'移動\',\'聯通\',\'電信\'］，要求寫一個演算法，實現［［\'白色\',\'16G\',

java8 利用reduce實現將列表中的多個元素的屬性求和並返回操作

利用java8流的特性，我們可以實現list中多個元素的 屬性求和 並返回。 案例：

js多個基本型別計算

let str=true+11+null+9+undefined+"javascript"+false+null+9+[]+[" "]計算str console.log(true+11) //12

使用Iterator刪除List中的多個元素操作

今天在寫程式碼時要刪除List中的多個元素時犯了一個很搞笑的錯誤，等效的就是以下程式碼

讓多個元素在一行顯示的方法和技巧(面試題)

如圖所示: display: inline 1 <div class=\"text1\">文字一</div> 2 <div class=\"text2\">文字二</div>

Layui 一行顯示多個元素

技術標籤：前端JavaScriptlayui一行多個元素 <div> 搜尋使用者名稱： <div class="layui-inline">

python中判斷多個元素是否在列表中

技術標籤：Python 如果希望判斷單個元素是否在列表中時可以通過in >>>\'a\' in [\'a\', \'b\', \'c\']

python 實現判斷一個列表中的一個或多個元素是否存在於一個字串中。

技術標籤：pythonpython 先描述一下問題，我想判斷幾個特定的字串，是否存在某一個長字串之中，比如，

向陣列的末尾新增一個或多個元素，並返回新的長度

需求：向陣列的末尾新增一個或多個元素，並返回新的長度 letidListStr=[] _selection.forEach((item,index)=>{//迴圈

JS 多個時間段合併取並集，得到一個或多個時間段

import dayjs from \'dayjs\'; // 一個用來格式化時間的庫，也可用其他代替//根據時間開始結束日期，生成連續的時間陣列（以天為單位）

js實現多個標題吸頂效果

對於導航的吸頂效果，pc端和移動端的需求可能有些差異。在pc端，我們通常只需要一個頂部導航；在移動端，在滑動頁面的時候，更需要多個標題的吸頂（例如地區的選擇，需要將省份吸頂）。

js：變數初識（更新變數、同時宣告多個變數、命名規範）

1、更新變數 一個變數被重新賦值之後，原來的值會被覆蓋，以最後一次賦的值為準

echarts.js 動態生成多個圖表 使用vue封裝元件操作

元件只做了簡單的傳值處理，記錄開發思路及echarts簡單使用。 這裡預設所有圖表樣式一致，都為柱狀圖，如需其他型別，可查閱echarts官網文件，再動態傳值即可。

js實現陣列內元素隨機排序

其實蠻容易實現的，關鍵是簡潔與否，下面是我自己寫的。 function randomSort(a){

js 將多個物件合併成一個物件 assign方法的實現

1.接下來介紹一下ES6在Object新加的方法 assign() 1.作用：將多個物件{} 合併成一個獨立物件。

java8如何對list中的map元素根據多個key值進行排序

使用JAVA自己的排序方法，有的時候是一個可行的選擇。 先從簡單的開始說起。

多個HTML檔案訪問同一常量，將常量寫入一個js檔案中便於修改維護

果我們有多個html頁面，每個頁面中都有一個常量要使用，但是以後這個常量可能會變化，如果我們這個常量寫入每個html中的話，那麼以後修改起來就要在每個頁面進行修改，不利於維護。我們可以把這個常量寫在js中，只要

react專案中，給元素寫多個類名

技術標籤：王哲的日常總結reactcss 做react專案的時候，有一個需求需要操作dom 我所做的專案是採用了css modules的方式設定樣式，我需要在一個標籤上同時設定兩個類名，一個是在css module下的，一個是不在的。採

vue元素根據不同條件切換多個class

技術標籤：Vuevue 做需求遇到一個樣式問題，橫向的選單tab在非管理員模式下有7個，在管理員模式下有8個，每個tab在中英文狀態下的長度又有長有短，用彈性佈局搞了好久總是不如意，最後決定用%寫死每個tab的width