大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > JavaScript技巧 > javascript仿百度图片瀑布流布局

javascript仿百度图片瀑布流布局

关键词:javascript仿百度图片瀑布流布局  阅读(834) 赞(19)

[摘要]本文是对javascript仿百度图片瀑布流布局的讲解,对学习JavaScript编程技术有所帮助,与大家分享。

waterfall.js

 define(function(require, exports, module) {
 
     var $ = require("jquery");
     var udf;
     
     var Waterfall = function (option){
         this.container = option.container;//定义容器
         this.dataSource = option.dataSource;//数据源
         this.itemTemplate = option.itemTemplate;//item末班
         this.baseInit();//初始化
     }
     
     Waterfall.prototype = {
         colWidth: 230,//列宽
         colCount: 5,//列数
         currentPageIndex: 0,
         currentPhotoIndex: 0,
         currentColHeight: {},
         currentMinHeichtCol: 0,
         transferItemIndex: 0,
         uls:[],
         baseInit: function (){
             this.initDom();
             this.initEvent();
             this.getPage();
             this.getPage();
             this.getPage();//test 获取三行内容
         },
         initDom: function (){
             var that = this;
             var ulHtmlArr = [];
             var $container = $(this.container);
             
             $container.css({
                 width: (this.colCount * (this.colWidth + 10))
             })
             
             for(var i = 0; i < this.colCount; i++){
                 ulHtmlArr.push('<ul  style="width:'+this.colWidth+'px"></ul>');
             }
             
             var ulHtml = ulHtmlArr.join("");
             $container.html(ulHtml);
             
             this.uls = $container.find(".photo-col");
             $.each(this.uls, function (index, item){
                 that.currentColHeight[index] = 0;
             })
         },
         getPage: function (){
             var that = this;
             var tempPhotoArr = this.dataSource.slice(this.currentPhotoIndex, this.currentPhotoIndex + this.colCount);
             this.currentPhotoIndex += this.colCount;
             
             $.each(this.uls, function (index, item){
                 var data = tempPhotoArr[index];
                 
                 if(!data){
                     return;
                 }
                 
                 that.currentColHeight[index] += data.h;
                 
                 if(that.currentColHeight[index] < that.currentColHeight[that.currentMinHeichtCol]){
                     that.currentMinHeichtCol  = index;
                 }
                 
                 var $template = that.getTemplate(data);
                 
                 if(++ that.transferItemIndex == 9){
                     $template.addClass("trans");
                 }
                 
                 $(item).append($template);
             })
         },
         initEvent: function (){
             var that = this;
             $(document).bind("scroll",function (){//触发的scroll事件
                 var scroll = document.body.scrollTop + 700;
                 if(that.currentColHeight[that.currentMinHeichtCol] < scroll){
                     that.getPage();
                 }
             })
         },
         getTemplate: function (data){
             var $li = $("<li>");
             var $template = $(this.itemTemplate);
             var img = $template.find(".base-img");
             img.attr({
                 src : data.src,
                 width: data.w,
                 height: data.h
             })
             $li.append($template);
             return $li;
         },
         clear: function (){
             //@TODO
         }
     }
     
     module.exports = Waterfall;
     
 })
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
	};
	
})

  预览:



相关评论