waterfall.js
1 define(function(require, exports, module) { 2 3 var $ = require("jquery"); 4 var udf; 5 6 var Waterfall = function (option){ 7 this.container = option.container;//定义容器 8 this.dataSource = option.dataSource;//数据源 9 this.itemTemplate = option.itemTemplate;//item末班 10 this.baseInit();//初始化 11 } 12 13 Waterfall.prototype = { 14 colWidth: 230,//列宽 15 colCount: 5,//列数 16 currentPageIndex: 0, 17 currentPhotoIndex: 0, 18 currentColHeight: {}, 19 currentMinHeichtCol: 0, 20 transferItemIndex: 0, 21 uls:[], 22 baseInit: function (){ 23 this.initDom(); 24 this.initEvent(); 25 this.getPage(); 26 this.getPage(); 27 this.getPage();//test 获取三行内容 28 }, 29 initDom: function (){ 30 var that = this; 31 var ulHtmlArr = []; 32 var $container = $(this.container); 33 34 $container.css({ 35 width: (this.colCount * (this.colWidth + 10)) 36 }) 37 38 for(var i = 0; i < this.colCount; i++){ 39 ulHtmlArr.push('<ul class="photo-col col' + i + '" style="width:'+this.colWidth+'px"></ul>'); 40 } 41 42 var ulHtml = ulHtmlArr.join(""); 43 $container.html(ulHtml); 44 45 this.uls = $container.find(".photo-col"); 46 $.each(this.uls, function (index, item){ 47 that.currentColHeight[index] = 0; 48 }) 49 }, 50 getPage: function (){ 51 var that = this; 52 var tempPhotoArr = this.dataSource.slice(this.currentPhotoIndex, this.currentPhotoIndex + this.colCount); 53 this.currentPhotoIndex += this.colCount; 54 55 $.each(this.uls, function (index, item){ 56 var data = tempPhotoArr[index]; 57 58 if(!data){ 59 return; 60 } 61 62 that.currentColHeight[index] += data.h; 63 64 if(that.currentColHeight[index] < that.currentColHeight[that.currentMinHeichtCol]){ 65 that.currentMinHeichtCol = index; 66 } 67 68 var $template = that.getTemplate(data); 69 70 if(++ that.transferItemIndex == 9){ 71 $template.addClass("trans"); 72 } 73 74 $(item).append($template); 75 }) 76 }, 77 initEvent: function (){ 78 var that = this; 79 $(document).bind("scroll",function (){//触发的scroll事件 80 var scroll = document.body.scrollTop + 700; 81 if(that.currentColHeight[that.currentMinHeichtCol] < scroll){ 82 that.getPage(); 83 } 84 }) 85 }, 86 getTemplate: function (data){ 87 var $li = $("<li>"); 88 var $template = $(this.itemTemplate); 89 var img = $template.find(".base-img"); 90 img.attr({ 91 src : data.src, 92 width: data.w, 93 height: data.h 94 }) 95 $li.append($template); 96 return $li; 97 }, 98 clear: function (){ 99 //@TODO 100 } 101 } 102 103 module.exports = Waterfall; 104 105 })
main.js
define(function(require) {
//require data
var Waterfall = require("waterfall");
var data = require("data");
var $ = require("jquery");
//create para
//get container
var _container = $(".photo-container");
//data source
var _data = data.getData(100);
//change your item template whatever you want
var _itemTemplate = '<div class="item-box"><image class="base-img"></image></div>';
//create instance
var waterfall = new Waterfall({
container: _container,
dataSource: _data,
itemTemplate: _itemTemplate
});
//fadein
_container.fadeIn(600);
});
data.js
define(function(require, exports, module) {
var baseData = [
{src:"./pic/a.jpg", w:230,h:344},
{src:"./pic/b.jpg", w:230,h:346},
{src:"./pic/c.jpg", w:230,h:344},
{src:"./pic/d.jpg", w:230,h:345},
{src:"./pic/e.jpg", w:230,h:303},
{src:"./pic/f.jpg", w:230,h:183},
{src:"./pic/g.jpg", w:230,h:172},
{src:"./pic/g.jpg", w:230,h:153},
{src:"./pic/i.jpg", w:230,h:321},
{src:"./pic/j.jpg", w:230,h:306}
];
var getData = function (picCount){
var arr = [];
for(var i = 0; i < picCount; i++){
var data = baseData[random(baseData.length - 1)];
arr.push(data);
}
return arr;
};
var random = function (num){
return Math.round(num * Math.random());
};
module.exports = {
getData : getData
};
})
预览:
