javascript實現(xiàn)瀑布流加載圖片原理
更新時間：2016年02月02日 10:56:27 作者：帶上餅干
這篇文章主要為大家介紹了javascript實現(xiàn)瀑布流加載圖片效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
講一下大概的原理吧
功能描述：
- 根據(jù)不同菜單的屬性值分別加載不同的數(shù)據(jù)
- 下拉滾動條到一定位置預(yù)加載圖片，滾動條拉到最底下的時候渲染html；
- 鼠標移到菜單，切換各個圖片列表；
- 鼠標移到圖片列表上，顯示詳細信息；
技術(shù)實現(xiàn)方案：
先梳理一下從加載到顯示的流程：
1. 加載數(shù)據(jù)
2. 拼接HTML寫入到頁面
3. 檢查剛剛寫入的HTML中的img是否全部加載完成，如果是，進入5、否則進入4
4. 等待圖片加載完成
5. 計算每個元素的位置
一開始的時候最頭疼的是如何定位的問題，后來經(jīng)過朋友指導終于解決：計算總共有多少列圖片并且把每一列的高度都放到一個數(shù)組里面。每當一張圖片加載完成的時候就查找這個數(shù)組里面最小的值，并且定位當前圖片的top設(shè)置為這個值，完成后把這個圖片的高度加上數(shù)組里面的最小值并且返回到數(shù)組里面，依次類推。
PS：因為這個功能代碼太多，只能作基本的簡單分解代碼了：
// 創(chuàng)建用于記錄每列高度的數(shù)組
_getLowestCol: function() {
t._cols = new Array(5),min = 0;
// 初始化為0
for (var i = 0; i < t._cols.length; i++) {
if (cols[i] < cols[min]) {
min = i;
}
return min;
}
},
_reposition: function() {
t._grids.each(function(i, grid) {
//先顯示出來
grid = $(grid).show();
var height = grid.outerHeight(), min = t._getLowestCol();
// 定位
grid.animate({
left: (t._colWidth + t._colSpacing) * min,
top: t._cols[min],
opacity: 1
},1000);
// 記錄高度
t._cols[min] += height;
});
}
其次開發(fā)過程中遇到的難題是：因為如上圖所示，鼠標移動到菜單欄需要切換圖片列表，并且分別需要用瀑布流加載不同類型的數(shù)據(jù)。所以要處理在切換頁面的時候如何才能做到每個頁面只執(zhí)行一次代碼請求接口，而不需要每一次切換都重新請求數(shù)據(jù)接口，僅僅執(zhí)行切換顯示圖片列表的操作就可以了。
考慮到每一個菜單都有一個自定義屬性，所以這個問題輕易地解決了：建立一個對象來記錄當前菜單是否已經(jīng)執(zhí)行過代碼，如果沒有就執(zhí)行請求數(shù)據(jù) ?！?/p>
var isLoad = {};//是否載入過
labelType.mouseover(function() {
var i = $(this).index();
var api = _this.attr('api');//接口標識
if(! isLoad[ api ]){
isLoad[ api ] = i;
loadData(wrapper, api);
}
});
以下為全部代碼：
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{ list-style-type:none;}
li img{width:100%;list-style:none;}
</style>
</head>
<body>
<div class="photo_box">
<ul id="container" style="border:1px solid #000;width:80%;height:600px;overflow:hidden;margin:0 auto;position: relative;">
</ul>
<div id="loading" class="loading" style="text-align: center;margin-top: 20px;font-size: 1.2em;">加載中...</div>
<div id="more" class="more"style="text-align: center;margin-top: 20px;font-size: 1.2em;"><input type="button" value="更 多" id="clear" /></div>
</div>
<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
<script type="text/javascript">
seajs.use(['lib/jquery/1.11.x/index.js', '_example/waterFall_1.1/waterfall.js'], function($, waterFall) {
waterFall.init({
container: $('#container'),
dataURL: 'http://www.woxiu.com/index.php?action=Index/Main&do=ApiZhuboGrade',
dataType: 'jsonp',
template: '<% for (var i = 0; i < data.length; i++) { %>' +
'<li style="display: none;">' +
'<img src=" <%-data[i].room_img%> ">' +
'</li>' +
'<% } %>',
colWidth: 200,
colSpacing: 10,
rowSpacing: 15,
page: 1,
pageEnd: 8,
});
// 限制同時展示的頁數(shù)
var loadCounter = 1;
function pageNum(){
if (loadCounter >= 3) {
$('#more').show();
$('#loading').hide();
return true;
} else {
loadCounter++;
$('#more').hide();
$('#loading').show();
}
return false;
}
$('#clear').click(function() {
loadCounter = 1;
waterFall._loadNext();
});
});
</script>
</body>
js：
/**
* 瀑布流布局組件類
* @param {Object} options 組件設(shè)置
* @param {NodeList} options.container 瀑布流容器
* @param {String} options.dataURL 數(shù)據(jù)地址
* @param {String} [options.dataType='jsonp'] 數(shù)據(jù)類型，json或jsonp
* @param {String} options.template 模板編輯
* @param {Number} [options.colWidth] 圖片大小。
* @param {Number} [options.colSpacing] 列間隔。
* @param {Number} [options.rowSpacing] 行間隔。
* @param {Number} [options.page=1] 數(shù)據(jù)開始頁碼
* @param {Number} [options.pageEnd] 數(shù)據(jù)末尾頁碼
* @pageNum() 函數(shù)，如果不需要現(xiàn)在加載也是，需要把函數(shù)里面的判斷去掉。
從加載到顯示的流程
1. 加載數(shù)據(jù)
2. 拼接HTML寫入到頁面
3. 檢查剛剛寫入的HTML中的img是否全部加載完成，如果是，進入5、否則進入4
4. 等待圖片加載完成
5. 計算每個元素的位置
*/
define(function(require, exports, module) {
'use strict';
var Tmpl = require('lib/tmpl/2.1.x/index.js'),
$ = require('lib/jquery/1.11.x/index.js');
var waterFall = {
init: function(options) {
var t = this;
t._container = options.container;
t._template = options.template;
t._colWidth = options.colWidth;
t._colSpacing = options.colSpacing;
t._rowSpacing = options.rowSpacing;
t.dataURL = options.dataURL;
t.dataType = options.dataType;
t.page = options.page;
t.pageEnd = options.pageEnd;
t._switch = false;
//計算有幾列 總寬度 / (列寬 + 列間隔)
t._totalCols = parseInt(t._container.width() / (t._colWidth + t._colSpacing));
// 創(chuàng)建用于記錄每列高度的數(shù)組
t._cols = new Array(t._totalCols);
// 初始化為0
for (var i = 0; i < t._cols.length; i++) {
t._cols[i] = 0;
}
t._loadingPage = options.page || 0;
t._loadNext(options);
//下拉滾動條加載
var lastTime = new Date().getTime();
$(window).scroll(function() {
if ( !t._switch ) {
//判斷是否滾動過快,在ie下
var thisTime = new Date().getTime();
if (thisTime - lastTime < 50) {
console.log(thisTime - lastTime);
lastTime = thisTime;
return;
}
if ($(window).scrollTop() + $(window).height() >= document.documentElement.scrollHeight) {
lastTime = thisTime;
t._loadNext();
}
}
});
},
//加載器
_loadNext: function(t) {
var t = this;
t._switch = true;
//請求數(shù)據(jù)
if (!t.trigger) {
$.ajax({
url: t.dataURL,
data: { page: ++t._loadingPage },
dataType:t.dataType,
success: function(response){
t.trigger = t._completeLoading(response);
},
error:function(){console.log('Error! 請求有誤');}
});
}
return false;
},
//加載完數(shù)據(jù)調(diào)用此函數(shù)
_completeLoading: function(result) {
var t = this;
if (t._loadingPage >= t.pageEnd) {
$('#more').hide();
$('#loading').html('<p>已是最后一頁了喔 ^_^ ^_^</p>');
return true;
}
else {
//if (!pageNum()) {
t._add(result);
//};
}
return false;
},
//添加格子
_add: function(result) {
var t = this, grids = '';
//調(diào)用模板
var content = Tmpl.render(t._template, {data:result.data});
//原始定位
t._grids = $(content).css({
position: 'absolute',
left: t._container.width(),
top: t._container.height(),
width: t._colWidth,
opacity: 0
});
//把Html添加到容器
t._container.append(t._grids);
// 執(zhí)行一次_reposition，如果所有圖片都加載完成，該方法返回true，否則返回false
if ( !t._reposition() ) {
// 有圖片未加載完，監(jiān)聽onload和onerror
t._grids.find('img').bind('load error', function() {
this.loaded = true;
// 有圖片加載完成，再次執(zhí)行_reposition
if (t._grids) {
t._reposition();
}
});
}
},
// 此方法用于獲取高度最低的列
_getLowestCol: function() {
var cols = this._cols, min = 0;
for (var i = 1; i < cols.length; i++) {
if (cols[i] < cols[min]) {
min = i;
}
}
return min;
},
//定位
_reposition: function() {
var t = this, allImgsLoaded = true;
// 檢測圖片是否全部加載完成
t._grids.find('img').each(function(i, img) {
if (!img.loaded && !img.complete) {
allImgsLoaded = false;
}
return allImgsLoaded;
});
if (allImgsLoaded) {
t._grids.each(function(i, grid) {
//先顯示出來
grid = $(grid).show();
var height = grid.outerHeight(), min = t._getLowestCol();
// 非第一行的時候，要加上行間隔
if (t._cols[min]) { t._cols[min] += t._rowSpacing; }
// 定位
grid.animate({
left: (t._colWidth + t._colSpacing) * min,
top: t._cols[min],
opacity: 1
},1000);
// 記錄高度
t._cols[min] += height;
});
// 重設(shè)外層容器高度為最高列高度
t._container.css( 'height', Math.max.apply(Math, t._cols) );
t._switch = false;
delete t._grids;
}
return allImgsLoaded;
},
}
return waterFall;
});
以上就是本文的全部內(nèi)容，希望對大家學習javascript程序設(shè)計有所幫助。
相關(guān)文章
微信小程序 自定義復(fù)選框?qū)崿F(xiàn)代碼實例
這篇文章主要介紹了微信小程序 自定義復(fù)選框?qū)崿F(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了使用JS來動態(tài)操作css的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
Javascript結(jié)合css實現(xiàn)網(wǎng)頁換膚功能
現(xiàn)在網(wǎng)站換皮膚是比較常見的功能，大多數(shù)論壇都有的，要想實現(xiàn)這樣效果可以看如下代碼.2009-11-11
IE6中使用position導致頁面變形的解決方案(js代碼)
IE6中使用position導致頁面變形，影響用戶體驗，通過搜索可以通過js來實現(xiàn)。2011-01-01
在本篇文章里小編給大家整理的是一篇關(guān)于js中hasOwnProperty的屬性及實例用法詳解內(nèi)容，有需要的朋友們可以跟著學習下。2021-11-11
JavaScript實現(xiàn)簡單的四則運算計算器完整實例
這篇文章主要介紹了JavaScript實現(xiàn)簡單的四則運算計算器,結(jié)合完整實例形式分析了javascript基于表單相應(yīng)實現(xiàn)加減乘除數(shù)學運算的操作技巧,需要的朋友可以參考下2017-04-04
javascript 觸發(fā)HTML元素綁定的函數(shù)
只能觸發(fā)函數(shù)的執(zhí)行，并不能完全模擬出實際的點擊。2010-09-09
這篇文章主要介紹了javascript修改表格背景色實例，代碼簡單，大家參考使用吧2013-12-12
javascript在網(wǎng)頁中實現(xiàn)讀取剪貼板粘貼截圖功能
這篇文章主要介紹了在網(wǎng)頁中實現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網(wǎng)頁的一個輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件,需要的朋友可以參考下2014-06-06
改變checkbox默認選中狀態(tài)及取值的實現(xiàn)代碼
下面小編就為大家?guī)硪黄淖僣heckbox默認選中狀態(tài)及取值的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05