利用jquery實現(xiàn)瀑布流3種案例
一、瀑布流是我們常見的案例,這里主要講述,用jquery的方式實現(xiàn)瀑布流的功能!
引言:我們經(jīng)常見到很多網(wǎng)站的瀑布流功能,如淘寶、京東這些商品等等..
實現(xiàn)它我們首先考慮幾個問題:1、獲取到數(shù)據(jù) 2、排列的方式 3、如何實現(xiàn)排列
其實,在瀑布流里有個核心的功能就是用到了絕對定位
我們逐步深入分析:
這是html的布局,css布局可以自己設(shè)置,只要保證grid盒子有絕對定位,其父元素有相對定位即可!后面有參考代碼
下面是script部分
這種方式,可以通過for循環(huán)按照順序獲取圖片的索引值,然后不斷的更改其css樣式中的top值和left值!
在我們獲取圖片的資源時,有的時候圖片的高度是不一致的,如果一直按照順序排列,最后的圖片顯示,排列不整齊,就會效果不佳!
繼續(xù)往下看:
我們可以通過另一種方法,來實現(xiàn)圖片插入當前列最短的一列,可以解決這個問題!
下面我們來主要看一下jquery的代碼:
好了,現(xiàn)在我們已經(jīng)通過兩種方式解決了瀑布流這個問題,但是我們還有個問題沒有解決,那就是做瀑布流很大的原因是因為圖片的量比較大,我們一個一個寫html是不是有點太low了!
繼續(xù)往下看:
下面介紹一種利用引擎模板來獲取json后臺的數(shù)據(jù)的方式,實現(xiàn)這個問題!
1、我們只需要搭建一個html盒子即可!
2、盒子搭建好了,數(shù)據(jù)要獲取啊,就靠它!
3、這是兩個js庫,在網(wǎng)上可下載到!
4、下面是具體的js部分,需要仔細分析了!
主要包括,調(diào)用搜索引擎模板里獲取到的內(nèi)容,綁定函數(shù),轉(zhuǎn)換成jquery對象!
這一部分主要包括:通過ajax向json請求數(shù)據(jù)
這一部分主要包括:遍歷函數(shù),進行尋找最短的列排列格子!
還有這一些,也是第四部分:
最后一步是:滾動的函數(shù),這一部分建議使用console.log在后臺驗證一下,更容易理解!
雖然最后一種辦法麻煩,但是這一次完成,我們就可以使用很多次,并且自動獲取很多數(shù)據(jù)!
下面給大家附上原碼,大家好好測試一下,不要忘記更改圖片和路徑哦!
第一種方法原碼:
<!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,看哪個列最矮,插入在哪個列</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(){ //每個格格不一定往自己序號%3這個列插入,看哪個列目前最矮,插在哪里= //得到所有的grid $grids = $(".grid"); //用一個數(shù)組存儲當前三個列的總高度 var colHeight = [0,0,0]; // console.log(colHeight); // 遍歷小格格 $grids.each(function(){ //找一下當前的最短列是誰 var minValue = _.min(colHeight); //colHeight里面的最小的值! //看一下最短列出現(xiàn)在index幾的位置上 var minIndex = _.indexOf(colHeight,minValue);//最短的值的下標 // 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"> // 定義變量和對象 // 獲取引擎模板中發(fā)的內(nèi)容,使用jquery轉(zhuǎn)化成字符串 var templateString = $("#grid_template").html(); // 把轉(zhuǎn)化后的字符串綁定在compileFunction函數(shù)上! var compileFunction = _.template(templateString);//_.template()返回的是一個函數(shù)! // console.log(typeof(compileFunction)); //function //轉(zhuǎn)換成jquery對象,為了后面使用jquery的方法 var $waterfall = $("#waterfall"); var $loading = $(".loading"); //三列瀑布流,每列的總高度 var colHeight = [0,0,0]; // 這是三列的高度數(shù)組,與里面的數(shù)值無關(guān),表示index的順序 // console.log(colHeight); // 獲取數(shù)據(jù) //信號量 var page = 1; getJSONandRender(page); function getJSONandRender(page){ // 為了增加用戶體驗 $loading.show(); //發(fā)出ajax請求 $.get("json/json" + page + ".txt",function(data){ //輸出字符串 //轉(zhuǎn)為對象 var dataObj = eval("(" + data + ")"); //解析ajax數(shù)據(jù),轉(zhuǎn)換成對象! //沒有更多數(shù)據(jù)了 // dataObj.news.length來自后臺json if(dataObj.news.length == 0){ $loading.show().html("沒有更多了"); return; //在這里截止后,lock也會截止 } // 遍歷函數(shù),動態(tài)獲取下標值根據(jù)絕對定位的位置進行排列! _.each(dataObj.news,function(dictionary){ //每遍歷一次,執(zhí)行一次函數(shù)! //這是系統(tǒng)內(nèi)置構(gòu)造函數(shù) var image = new Image(); //實例化一個對象分配內(nèi)存空間 // 當對象被實例化后,構(gòu)造函數(shù)會立即執(zhí)行它所包含的任何代碼 image.src = dictionary.imgurl; //我們現(xiàn)在給image轉(zhuǎn)為jQuery對象,然后綁定事件 $(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)聽滾動 $(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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JQuery獲取各種寬度、高度(format函數(shù))實例
本例除了使用標準的JQuery類庫外,還添加了自定義的函數(shù)來進行字符串的format操作。2013-03-03jQuery實戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
網(wǎng)絡(luò)上很很多這種效果的JS寫法,但是還沒有看見用jQuery寫的,效果實現(xiàn)很簡單,確切的說是用jquery實現(xiàn)這個效果很簡單,這就是jquery的強大和魅力所在。2011-04-04jQuery實現(xiàn)布局高寬自適應(yīng)的簡單實例
下面小編就為大家?guī)硪黄猨Query實現(xiàn)布局高寬自適應(yīng)的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-0510個基于jQuery或JavaScript的WYSIWYG 編輯器整理
10驚人的自由豐富的文本編輯器,將提升您的網(wǎng)站的功能。我已經(jīng)收集了5 jQuery和5個非jQuery實時評價附帶簡單的功能,具有辦公一樣的功能。2010-05-05