摘要:何為瀑布流瀑布流,又稱瀑布流式布局。最早采用此布局的網(wǎng)站是,逐漸在國內(nèi)流行開來。四是服裝款式設(shè)計資訊平臺如看潮網(wǎng)等等。
何為瀑布流:
瀑布流,又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局,視覺表現(xiàn)為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest,逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風(fēng)格。
瀑布流的應(yīng)用: 瀑布流對于圖片的展現(xiàn),是高效而具有吸引力的,用戶一眼掃過的快速閱讀模式可以在短時間內(nèi)獲得更多的信息量,而瀑布流里懶加載模式又避免了用戶鼠標(biāo)點擊的翻頁操作,瀑布流的主要特性便是錯落有致,定寬而不定高的設(shè)計讓頁面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式,巧妙的利用視覺層級,視線的任意流動又緩解了視覺疲勞,同時給人以不拘一格的感覺,切中年輕一族的個性化心理。[1] 國內(nèi)類Pinterest網(wǎng)站也如雨后春筍般出現(xiàn),已知網(wǎng)站超40家,類Pinterest網(wǎng)站有四種,一是電商導(dǎo)購,如想去網(wǎng)、蘑菇街和美麗說、好享說、依托于淘寶平臺;二是興趣圖譜分享,如知美、花瓣等;三是在細(xì)分垂直領(lǐng)域,如針對吃貨的零食控、針對家居行業(yè)的他部落等。四是服裝款式設(shè)計資訊平臺如看潮網(wǎng)等等。
優(yōu)
實現(xiàn)效果通用類:豆瓣市集,花瓣網(wǎng),我喜歡,讀圖知天下 美女圖片:圖麗網(wǎng) 時尚資訊類:看潮網(wǎng) 時尚購物類:蘑菇街,美麗說,人人逛街,卡當(dāng)網(wǎng)
品牌推廣類:凡客達(dá)人 家居o2o類:新巢網(wǎng)小貓家 微博社交類: 都愛看 搞笑圖片類:道趣兒 藝術(shù)收藏類:微藝術(shù) 潮流圖文分享:荷都分享網(wǎng)
HTML代碼:
瀑布流
CSS代碼:
*{ margin: 0; padding: 0; } #main{ position: relative; } .pin{ padding: 15px 0 0 15px; float: left; } .box{ padding: 5px; border-color: 1px solid #ccc; box-shadow: 0 0 6px #ccc; border-radius: 5px; }
jQuery代碼:
$(document).ready(function(){ $(window).on("load", function(){ imgLocation(); var dataImg = {"data":[{"src":"alt1.jpg"},{"src":"alt2.jpg"}]}; // 獲取最后一張圖片距離頂端的高度 + 它本身高度的一半 $(window).scroll(function() { if(getSideHeight()){ $.each(dataImg.data, function(index, value){ var pin = $("").addClass("pin").appendTo("#main"); var box = $("").addClass("box").appendTo(pin); var img = $("").attr("src", "images/" + $(value).attr("src")).appendTo(box); }); imgLocation(); } }); }); }); //獲取最后一張圖片的高度 function getSideHeight(){ var box = $("pin"); var lastImgHeight = (box.last().get(0)).offsetTop - Math.floor(box.last().height()/2); var documentHeight = $(document).height(); //獲取當(dāng)前窗口的高度 var scrollHeight = $(window).scrollTop(); //獲取滾動的距離 return (lastImgHeight < documentHeight + scrollHeight) ? true:false; } //圖片位置擺放 function imgLocation(){ var box = $(".pin"); //返回一個數(shù)值 var boxWidth = box.eq(0).width(); //每張圖片的寬度 var num = Math.floor($(window).width()/boxWidth); //一行能放的圖片的個數(shù) var numArr = []; box.each(function(index, value){ var boxHeight = box.eq(index).height(); //獲取每張圖片的高度 if(index < num){ //第一排 numArr[index] = boxHeight; } else{ //第二排 var minboxHeight = Math.min.apply(numArr,numArr); var minIndex = $.inArray(minboxHeight, numArr); $(value).css({ position: "absolute", top: minboxHeight, left: box.eq(minIndex).position().left }); numArr[minIndex] += box.eq(index).height(); //新高度 } }); }文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/84221.html
相關(guān)文章
jQuery實現(xiàn)瀑布流效果
摘要:何為瀑布流瀑布流,又稱瀑布流式布局。最早采用此布局的網(wǎng)站是,逐漸在國內(nèi)流行開來。四是服裝款式設(shè)計資訊平臺如看潮網(wǎng)等等。 何為瀑布流: 瀑布流,又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局,視覺表現(xiàn)為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest,逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風(fēng)格。 ...
jQuery實現(xiàn)瀑布流效果
摘要:何為瀑布流瀑布流,又稱瀑布流式布局。最早采用此布局的網(wǎng)站是,逐漸在國內(nèi)流行開來。四是服裝款式設(shè)計資訊平臺如看潮網(wǎng)等等。 何為瀑布流: 瀑布流,又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局,視覺表現(xiàn)為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest,逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風(fēng)格。 ...
懶加載、瀑布流和LightBox實現(xiàn)圖片搜索效果
摘要:無非就是獲取用戶輸入的獲取圖片信息組裝填充頁面數(shù)據(jù)瀑布流布局處理在頁面滾動時判斷最后一張圖片是否可見,如果是則重復(fù)以上內(nèi)容查看源碼 開始 做一個小項目,算是對js和jQuery的一次練習(xí)吧。 圖片資源來自這個網(wǎng)站(上面有很多高清圖片關(guān)鍵還是免費下載的):https://unsplash.com/ 項目具體效果可以點這里:https://bjw1234.github.io/ima......
瀑布流插件Masonry的配置和使用
摘要:是最流行的瀑布流插件之一,配置簡單,功能強(qiáng)大,在上收獲了。如果你想使用瀑布流提升網(wǎng)站體驗,將是不錯的選擇。瀑布流,又稱瀑布流式布局。需要注意的是,如果你需要加載圖片,不會在圖片加載完后重新布局,這可能會影響你的布局效果,建議配合使用插件。 Masonry是最流行的瀑布流插件之一,配置簡單,功能強(qiáng)大,在Github上收獲了1w+ stars。如果你想使用瀑布流提升網(wǎng)站體驗,Masonry...
發(fā)表評論
0條評論
閱讀 2067·2021-10-12 10:12
閱讀 788·2021-09-24 09:47
閱讀 1187·2021-08-19 11:12
閱讀 3461·2019-08-29 13:06
閱讀 681·2019-08-26 11:43
閱讀 2563·2019-08-23 17:20
閱讀 1146·2019-08-23 16:52
閱讀 2594·2019-08-23 14:27