JavaScript中怎么實(shí)現(xiàn)圖片瀑布流布局-創(chuàng)新互聯(lián)
JavaScript中怎么實(shí)現(xiàn)圖片瀑布流布局，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。
1、第一種方式
第一種方式前提是：圖片的寬度固定，但是列可變（根據(jù)屏幕大小）
通過(guò)上面的介紹，我們知道要實(shí)現(xiàn)瀑布流的前提是寬度一致（假如為100px），高度可以不相同。
【相關(guān)課程推薦：JavaScript視頻教程】
我們首先確定排布的列數(shù)（假如為4列），那么第一行只能放4張圖片，然后將每個(gè)圖片的高度放入一個(gè)數(shù)組中（假如為 heightArr = [100,50, 200,30]），當(dāng)我們?cè)诜湃胂乱粡垐D片的時(shí)候就要判斷這個(gè)數(shù)組中哪個(gè)高度是最小的（這里是30），然后還要知道最小的高度所在高度數(shù)組的索引（這里是i = 3），然后我們就可以對(duì)這張圖片進(jìn)行定位：
{ position: absolute; left: i*100 + 'px'; top: 30 + 'px'}如此遍歷剩下的圖片即可。
實(shí)現(xiàn)代碼
下面是未處理的原始代碼，圖片之間間隔很多空白，影響美觀。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { position: relative; } img { width: 200px; vertical-align: top; padding: 5px; } </style></head><body> <p class="box"> <img src="./images/img/2-.jpg" alt=""> <img src="./images/img/3-.jpg" alt=""> <img src="./images/img/4-.jpg" alt=""> <img src="./images/img/5-.jpg" alt=""> <img src="./images/img/6-.jpg" alt=""> <img src="./images/img/7-.jpg" alt=""> <img src="./images/img/8-.jpg" alt=""> <img src="./images/img/9-.jpg" alt=""> <img src="./images/img/10-.jpg" alt=""> <img src="./images/img/11-.jpg" alt=""> <img src="./images/img/12-.jpg" alt=""> <img src="./images/img/13-.jpg" alt=""> <img src="./images/img/14-.jpg" alt=""> <img src="./images/img/15-.jpg" alt=""> <img src="./images/img/16-.jpg" alt=""> </p></body></html>下面是處理后的代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { position: relative; } img { width: 200px; vertical-align: top; padding: 5px; } </style></head><body> <p class="box"> <img src="./images/img/2-.jpg" alt=""> <img src="./images/img/3-.jpg" alt=""> <img src="./images/img/4-.jpg" alt=""> <img src="./images/img/5-.jpg" alt=""> <img src="./images/img/6-.jpg" alt=""> <img src="./images/img/7-.jpg" alt=""> <img src="./images/img/8-.jpg" alt=""> <img src="./images/img/9-.jpg" alt=""> <img src="./images/img/10-.jpg" alt=""> <img src="./images/img/11-.jpg" alt=""> <img src="./images/img/12-.jpg" alt=""> <img src="./images/img/13-.jpg" alt=""> <img src="./images/img/14-.jpg" alt=""> <img src="./images/img/15-.jpg" alt=""> <img src="./images/img/16-.jpg" alt=""> </p></body><script src="./jquery.min.js"></script><script> $(function () { // 獲取圖片的寬度(200px) let imgWidth = $('img').outerWidth(); // 200 waterfallHandler(); // 瀑布流處理 function waterfallHandler() { // 獲取圖片的列數(shù) let column = parseInt($(window).width() / imgWidth); // 高度數(shù)組 let heightArr = []; for(let i=0; i<column; i++) { heightArr[i] = 0; } // 遍歷所有圖片進(jìn)行定位處理 $.each($('img'), function (index, item) { // 當(dāng)前元素的高度 let itemHeight = $(item).outerHeight(); // 高度數(shù)組最小的高度 let minHeight = Math.min(...heightArr); // 高度數(shù)組最小的高度的索引 let minIndex = heightArr.indexOf(minHeight); $(item).css({ position: 'absolute', top: minHeight + 'px', left: minIndex * imgWidth + 'px' }); heightArr[minIndex] += itemHeight; }); } // 窗口大小改變 $(window).resize(function () { waterfallHandler(); }); });</script></html>2、第二種方式
第二種方式前提是：列是固定的個(gè)數(shù)，然后圖片根據(jù)屏幕的寬度進(jìn)行自適應(yīng)縮放。
這種方式由于圖片是可以縮放的，寬高不好確定，因此不好用定位的方式處理。
我們可以這樣處理，既然知道了列，那么每一列做一個(gè)容器。然后遍歷圖片，將圖片放入容器高度最小的容器中即可。
這里我們使用js來(lái)添加圖片，而不是事先寫(xiě)好在html中了。
實(shí)現(xiàn)代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul li { list-style: none; float: left; } </style></head><body></body><script src="./jquery.min.js"></script><script> $(function () { const COLUMN = 4; // 4列 let arr = []; // 存儲(chǔ)4列l(wèi)i let minHeight = [] // 存儲(chǔ)4列的高度 create(); function create() { // 創(chuàng)建ul li作為每一列的容器 $("<ul></ul>").appendTo($("body")).css("width", "100%"); for (let i = 0; i < COLUMN; i++) { var li = document.createElement("li"); $(li).appendTo($("ul")) .css({ "width": "24%", "margin": "0 0.5%" }); arr.push(li); // console.log(arr); minHeight.push(0); } createImg(); } function createImg() { let img = new Image(); img.num = 2; img.src = `./images/img/${img.num}-.jpg`; // 素材圖片的規(guī)律為 2-.jpg 3-.jpg 4-.jpg ... $(img).css("width", "100%"); // 當(dāng)圖片加載完后 $(img).on("load", loadHandler); } function loadHandler() { // 高度數(shù)組的最小值 let min = Math.min.apply(null, minHeight); // 高度數(shù)組的最小值索引 let minIndex = minHeight.indexOf(min); // 克隆一份圖片 let im = this.cloneNode(true); // 將圖片假如對(duì)應(yīng)最小值索引的容器中 arr[minIndex].append(im); // 更新最小值索引的容器的高度 minHeight[minIndex] += im.getBoundingClientRect().height; this.num++; // 圖片的個(gè)數(shù)只有79張 if (this.num > 79) { $(this).off("load", loadHandler); return; } this.src = `./images/img/${this.num}-.jpg`; } });</script></html>看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。
分享名稱(chēng)：JavaScript中怎么實(shí)現(xiàn)圖片瀑布流布局-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://www.chinadenli.net/article38/dhcppp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄、用戶(hù)體驗(yàn)、微信公眾號(hào)、網(wǎng)站改版
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- Django2.1集成xadmin管理后臺(tái)容易出現(xiàn)的錯(cuò)誤總結(jié)-創(chuàng)新互聯(lián)
- SDN(軟件定義網(wǎng)絡(luò))簡(jiǎn)史-早期-創(chuàng)新互聯(lián)
- python和java對(duì)比哪個(gè)更簡(jiǎn)單-創(chuàng)新互聯(lián)
- Centos7.3如何安裝Mysql5.7并更改原始密碼-創(chuàng)新互聯(lián)
- 如何在微信小程序中實(shí)現(xiàn)表格-創(chuàng)新互聯(lián)
- PHP如何實(shí)現(xiàn)無(wú)限分類(lèi)-創(chuàng)新互聯(lián)
- 分析CookieSameSite屬性及其在ASP.NET項(xiàng)目中的應(yīng)用-創(chuàng)新互聯(lián)
- 談網(wǎng)站建設(shè)的關(guān)鍵詞優(yōu)化排名和程序關(guān)系 2016-07-28
- 成都網(wǎng)站設(shè)計(jì)制作之關(guān)鍵詞優(yōu)化工具 2016-11-12
- 整站優(yōu)化和關(guān)鍵詞優(yōu)化的區(qū)別 2023-05-03
- seo關(guān)鍵詞優(yōu)化小技巧有哪些? 2013-07-03
- 如果網(wǎng)站被黑SEO關(guān)鍵詞優(yōu)化該怎樣做? 2015-08-23
- 關(guān)鍵詞優(yōu)化，網(wǎng)站SEO技巧主導(dǎo)資源^放送 2016-09-23
- SEO長(zhǎng)尾關(guān)鍵詞優(yōu)化有哪些技巧？ 2015-04-30
- 服飾網(wǎng)站建設(shè)關(guān)鍵詞優(yōu)化在Top1以外的原因 2022-04-15
- 關(guān)鍵詞優(yōu)化排名需要注意哪些技巧? 2015-06-25
- 網(wǎng)站優(yōu)化師對(duì)關(guān)鍵詞優(yōu)化的分析 2022-06-06
- 網(wǎng)站建設(shè)之關(guān)鍵詞優(yōu)化 2022-08-14
- 怎樣做好長(zhǎng)尾關(guān)鍵詞優(yōu)化流程? 2015-09-23