當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript之图片操作3

發布時間：2025/5/22 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript之图片操作3 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在頁面布局中，常常會用到九宮格布局，如下圖所示：

本次我們就以九宮格為基礎進行圖片的布局操作，首先我們以上面的圖片的為例，假設每個格子的大小都相同，將每一個格子相對其父元素進行定位，這樣，我們只需要控制每個格子的left和top屬性，就可以控制圖片的位置了，例如上面序號為4的格子，其left屬性值就是每個格子一倍的寬度值，top屬性值就是每個格子的一倍高度值，以此為基礎，我們將實現下面的效果：

通過用戶點擊自定義每列顯示的個數，來動態控制布局。

首先我們需要在頁面中寫入基礎代碼，實現圖一的默認顯示效果：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;list-style: none;}#top{padding: 20px;}#bottom{position: relative;}.box{width: 220px;height: 360px;margin: 0 15px 15px 0;background-color: #e8e8e8;}.box p:last-child{font-size: 13px;color: orangered;}</style> </head> <body><div id="top"><button>3列</button><button>4列</button><button>5列</button></div><div id="bottom"><div class="box"><img src="image/1.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/2.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/3.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/4.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/5.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/6.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/7.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/8.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/9.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/10.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/11.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/12.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/13.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/14.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div><div class="box"><img src="image/15.jpg" alt=""><p>因為遇見你</p><p>孫怡鄧倫牽手演繹刺繡奇緣</p></div></div> </body> </html>

然后獲取相應的標簽，監聽用戶的點擊事件，得到每列顯示的個數

//獲取需要的標簽var btns = document.getElementById("top").children;var bottom = document.getElementById("bottom");var allCols = 1;// 2.監聽按鈕的點擊btns[0].onclick = function () {allCols = 3;};btns[1].onclick = function () {allCols = 4;};btns[2].onclick = function () {allCols = 5;};

第三步，我們需要根據每個盒子的大小和每列顯示的個數，依次計算每個盒子的位置：

//根據每個盒子的大小定義變量var boxW = 220, boxH = 360, marginXY = 15;//遍歷 for(var i=0; i<bottom.children.length; i++){//求出當前盒子所在的行和列var row = parseInt(i / allCols);var col = parseInt(i % allCols);// console.log("當前盒子在第" + row + " ,第" + col);//盒子的定位var currentBox = parentNode.children[i];currentBox.style.position = 'absolute';currentBox.style.left = col * (boxW + marginXY) + 'px';currentBox.style.top = row * (boxH + marginXY) + 'px';
}

現在，基本功能已經完成，需要將代碼進行稍微的整理，完整代碼如下：

完整代碼下載鏈接：點這里

轉載于:https://www.cnblogs.com/yuyujuan/p/9537458.html

總結

以上是生活随笔為你收集整理的JavaScript之图片操作3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：问题 B: 分组统计
下一篇： w7系统怎么把字体放大如何在W7系统中