javascript 仿百度图片 瀑布流布局

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

	};

	

})

　　预览: