利用jquery實(shí)現(xiàn)瀑布流3種案例
一、瀑布流是我們常見(jiàn)的案例,這里主要講述,用jquery的方式實(shí)現(xiàn)瀑布流的功能!
引言:我們經(jīng)常見(jiàn)到很多網(wǎng)站的瀑布流功能,如淘寶、京東這些商品等等..
實(shí)現(xiàn)它我們首先考慮幾個(gè)問(wèn)題:1、獲取到數(shù)據(jù) 2、排列的方式 3、如何實(shí)現(xiàn)排列
其實(shí),在瀑布流里有個(gè)核心的功能就是用到了絕對(duì)定位
我們逐步深入分析:
這是html的布局,css布局可以自己設(shè)置,只要保證grid盒子有絕對(duì)定位,其父元素有相對(duì)定位即可!后面有參考代碼
下面是script部分
這種方式,可以通過(guò)for循環(huán)按照順序獲取圖片的索引值,然后不斷的更改其css樣式中的top值和left值!
在我們獲取圖片的資源時(shí),有的時(shí)候圖片的高度是不一致的,如果一直按照順序排列,最后的圖片顯示,排列不整齊,就會(huì)效果不佳!
繼續(xù)往下看:
我們可以通過(guò)另一種方法,來(lái)實(shí)現(xiàn)圖片插入當(dāng)前列最短的一列,可以解決這個(gè)問(wèn)題!
下面我們來(lái)主要看一下jquery的代碼:
好了,現(xiàn)在我們已經(jīng)通過(guò)兩種方式解決了瀑布流這個(gè)問(wèn)題,但是我們還有個(gè)問(wèn)題沒(méi)有解決,那就是做瀑布流很大的原因是因?yàn)閳D片的量比較大,我們一個(gè)一個(gè)寫(xiě)html是不是有點(diǎn)太low了!
繼續(xù)往下看:
下面介紹一種利用引擎模板來(lái)獲取json后臺(tái)的數(shù)據(jù)的方式,實(shí)現(xiàn)這個(gè)問(wèn)題!
1、我們只需要搭建一個(gè)html盒子即可!
2、盒子搭建好了,數(shù)據(jù)要獲取啊,就靠它!
3、這是兩個(gè)js庫(kù),在網(wǎng)上可下載到!
4、下面是具體的js部分,需要仔細(xì)分析了!
主要包括,調(diào)用搜索引擎模板里獲取到的內(nèi)容,綁定函數(shù),轉(zhuǎn)換成jquery對(duì)象!
這一部分主要包括:通過(guò)ajax向json請(qǐng)求數(shù)據(jù)
這一部分主要包括:遍歷函數(shù),進(jìn)行尋找最短的列排列格子!
還有這一些,也是第四部分:
最后一步是:滾動(dòng)的函數(shù),這一部分建議使用console.log在后臺(tái)驗(yàn)證一下,更容易理解!
雖然最后一種辦法麻煩,但是這一次完成,我們就可以使用很多次,并且自動(dòng)獲取很多數(shù)據(jù)!
下面給大家附上原碼,大家好好測(cè)試一下,不要忘記更改圖片和路徑哦!
第一種方法原碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: #ccc; } .waterfall{ width: 790px; /*height: 1000px;*/ /*border: 1px solid red;*/ margin: 0 auto; position: relative; } .grid{ position: absolute; width: 230px; background-color: white; padding: 10px; border-radius: 15px; } .grid img{ width: 230px; } </style> </head> <body> <div class="waterfall"> <div class="grid"> <img src="images/0.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/1.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/2.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/3.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/4.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/5.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/6.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/7.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/8.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/9.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/10.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/11.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/12.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> </div> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript"> window.onload = function(){ //得到所有的grid $grids = $(".grid"); // $grids.each(function(){ var sum = 0; //遍歷它上面的人的總高度 for(var i = $(this).index() - 3 ; i >= 0 ; i-=3){ sum += $grids.eq(i).outerHeight() + 20; } console.log($(this).index()); $(this).css({ "top" : sum, "left" : ($(this).index() % 3) * 270 }) }); } </script> </body> </html>
第二種方法原碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: #ccc; } .waterfall{ width: 790px; margin: 0 auto; position: relative; } .grid{ position: absolute; width: 230px; background-color: white; padding: 10px; border-radius: 15px; } .grid img{ width: 230px; } </style> </head> <body> <h3>瀑布流的算法2,看哪個(gè)列最矮,插入在哪個(gè)列</h3> <div class="waterfall"> <div class="grid"> <img src="images/0.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/1.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)內(nèi)容內(nèi)容內(nèi)容內(nèi)內(nèi)容內(nèi)容內(nèi)容內(nèi)內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/2.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/3.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/4.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/5.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/6.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/7.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/8.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/9.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/10.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/11.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="grid"> <img src="images/12.png" alt="" /> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> </div> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="js/underscore.js"></script> <script type="text/javascript"> window.onload = function(){ //每個(gè)格格不一定往自己序號(hào)%3這個(gè)列插入,看哪個(gè)列目前最矮,插在哪里= //得到所有的grid $grids = $(".grid"); //用一個(gè)數(shù)組存儲(chǔ)當(dāng)前三個(gè)列的總高度 var colHeight = [0,0,0]; // console.log(colHeight); // 遍歷小格格 $grids.each(function(){ //找一下當(dāng)前的最短列是誰(shuí) var minValue = _.min(colHeight); //colHeight里面的最小的值! //看一下最短列出現(xiàn)在index幾的位置上 var minIndex = _.indexOf(colHeight,minValue);//最短的值的下標(biāo) // console.log(minIndex); $(this).css({ "top" : minValue , "left" : minIndex * 270 }); colHeight[minIndex] += $(this).outerHeight() + 20; // console.log(colHeight[minIndex]); }) } </script> </body> </html>
第三種方法原碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: #ccc; } .waterfall{ width: 790px; margin: 0 auto; position: relative; } .grid{ position: absolute; width: 230px; background-color: white; padding: 10px; border-radius: 15px; } .grid img{ width: 230px; } .grid .title{ font-weight: bold; font-size: 18px; line-height: 32px; } .grid .neirong{ line-height: 150%; font-size: 14px; margin-bottom: 20px; } .grid .zuozhe{ float: right; color:orange; font-size: 12px; } .loading{ margin: 0 auto; width: 400px; line-height: 30px; text-align: center; font-size: 14px; background-color: gold; color:white; } </style> </head> <body> <div class="waterfall" id="waterfall"> </div> <div class="loading"> 正在加載... </div> <script type="text/template" id="grid_template"> <div class="grid"> <img src="<%=imgurl%>" alt="" /> <p class="title"><%=title%></p> <p class="neirong"><%=content%></p> <p class="zuozhe"><%=author%></p> </div> </script> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="js/underscore.js"></script> <script type="text/javascript"> // 定義變量和對(duì)象 // 獲取引擎模板中發(fā)的內(nèi)容,使用jquery轉(zhuǎn)化成字符串 var templateString = $("#grid_template").html(); // 把轉(zhuǎn)化后的字符串綁定在compileFunction函數(shù)上! var compileFunction = _.template(templateString);//_.template()返回的是一個(gè)函數(shù)! // console.log(typeof(compileFunction)); //function //轉(zhuǎn)換成jquery對(duì)象,為了后面使用jquery的方法 var $waterfall = $("#waterfall"); var $loading = $(".loading"); //三列瀑布流,每列的總高度 var colHeight = [0,0,0]; // 這是三列的高度數(shù)組,與里面的數(shù)值無(wú)關(guān),表示index的順序 // console.log(colHeight); // 獲取數(shù)據(jù) //信號(hào)量 var page = 1; getJSONandRender(page); function getJSONandRender(page){ // 為了增加用戶(hù)體驗(yàn) $loading.show(); //發(fā)出ajax請(qǐng)求 $.get("json/json" + page + ".txt",function(data){ //輸出字符串 //轉(zhuǎn)為對(duì)象 var dataObj = eval("(" + data + ")"); //解析ajax數(shù)據(jù),轉(zhuǎn)換成對(duì)象! //沒(méi)有更多數(shù)據(jù)了 // dataObj.news.length來(lái)自后臺(tái)json if(dataObj.news.length == 0){ $loading.show().html("沒(méi)有更多了"); return; //在這里截止后,lock也會(huì)截止 } // 遍歷函數(shù),動(dòng)態(tài)獲取下標(biāo)值根據(jù)絕對(duì)定位的位置進(jìn)行排列! _.each(dataObj.news,function(dictionary){ //每遍歷一次,執(zhí)行一次函數(shù)! //這是系統(tǒng)內(nèi)置構(gòu)造函數(shù) var image = new Image(); //實(shí)例化一個(gè)對(duì)象分配內(nèi)存空間 // 當(dāng)對(duì)象被實(shí)例化后,構(gòu)造函數(shù)會(huì)立即執(zhí)行它所包含的任何代碼 image.src = dictionary.imgurl; //我們現(xiàn)在給image轉(zhuǎn)為jQuery對(duì)象,然后綁定事件 $(image).load(function(){ // console.log(dictionary.imgurl + "加載完畢"); var domString = compileFunction(dictionary); // console.log(typeof(domString)); var $grid = $(domString); $waterfall.append($grid); //根據(jù)瀑布流算法,設(shè)置它的left、top // 最小值 minValue = _.min(colHeight); // 最小值的位置! minIndex = _.indexOf(colHeight,minValue); $grid.css({ "top" : minValue, "left" : minIndex * 270 }); //改變總列高數(shù)組的值 colHeight[minIndex] += $grid.outerHeight() + 10; //讓大盒子根據(jù)最高的列設(shè)置高度 $waterfall.css("height",_.max(colHeight)); //隱藏loading文本 $loading.hide(); }); }); lock = true; }); } var lock = true; //監(jiān)聽(tīng)滾動(dòng) $(window).scroll(function(){ if(!lock) return; var rate = $(window).scrollTop() / ($(document).height() - $(window).height()); if(rate >= 0.7){ page ++; getJSONandRender(page); lock = false; } }) </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 瀑布流的實(shí)現(xiàn)方式(原生js+jquery+css3)
- 基于jquery實(shí)現(xiàn)瀑布流布局
- jQuery實(shí)現(xiàn)瀑布流布局詳解(PC和移動(dòng)端)
- javascript實(shí)現(xiàn)瀑布流加載圖片原理
- 詳解javascript實(shí)現(xiàn)瀑布流絕對(duì)式布局
- 基于JavaScript實(shí)現(xiàn)瀑布流布局(二)
- JavaScript實(shí)現(xiàn)瀑布流布局
- 原生JavaScript實(shí)現(xiàn)瀑布流布局
- js實(shí)現(xiàn)瀑布流的三種方式比較
- 原生js實(shí)現(xiàn)移動(dòng)端瀑布流式代碼示例
相關(guān)文章
JQuery獲取各種寬度、高度(format函數(shù))實(shí)例
本例除了使用標(biāo)準(zhǔn)的JQuery類(lèi)庫(kù)外,還添加了自定義的函數(shù)來(lái)進(jìn)行字符串的format操作。2013-03-03jQuery實(shí)戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
網(wǎng)絡(luò)上很很多這種效果的JS寫(xiě)法,但是還沒(méi)有看見(jiàn)用jQuery寫(xiě)的,效果實(shí)現(xiàn)很簡(jiǎn)單,確切的說(shuō)是用jquery實(shí)現(xiàn)這個(gè)效果很簡(jiǎn)單,這就是jquery的強(qiáng)大和魅力所在。2011-04-04jQuery實(shí)現(xiàn)布局高寬自適應(yīng)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)布局高寬自適應(yīng)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jQuery+ajax實(shí)現(xiàn)頂一下,踩一下效果
很多網(wǎng)站上面有頂一下,踩一下效果是直接用別人做好的插件放上去的,上星期正好要用到這個(gè)效果,就去研究了下。下面就一步一步來(lái)實(shí)現(xiàn)整個(gè)效果。。。。2010-07-0710個(gè)基于jQuery或JavaScript的WYSIWYG 編輯器整理
10驚人的自由豐富的文本編輯器,將提升您的網(wǎng)站的功能。我已經(jīng)收集了5 jQuery和5個(gè)非jQuery實(shí)時(shí)評(píng)價(jià)附帶簡(jiǎn)單的功能,具有辦公一樣的功能。2010-05-05jquery.pager.js實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了jquery.pager.js實(shí)現(xiàn)分頁(yè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07基于jQuery插件實(shí)現(xiàn)點(diǎn)擊小圖顯示大圖效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)點(diǎn)擊小圖顯示大圖效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05jquery修改屬性值實(shí)例代碼(設(shè)置屬性值)
jQuery attr()方法用于設(shè)置/改變屬性值,下面的例子演示如何改變(設(shè)置)鏈接中 href 屬性的值2014-01-01Jquery實(shí)戰(zhàn)_讀書(shū)筆記1—選擇jQuery
近期公司積極組織我們這些開(kāi)發(fā)人員學(xué)習(xí)進(jìn)步,督促我們學(xué)習(xí)更多的技術(shù)來(lái)提高自己。為此我選擇了jQuery作為我學(xué)習(xí)的方向,同時(shí)我也是想將我的學(xué)習(xí)心得分享給大家,以后我會(huì)不斷的更新一系列jQuery方面的學(xué)習(xí)紀(jì)要,幫助大家學(xué)習(xí)。2010-01-01