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             //@TODO100         }101     }102     103     module.exports = Waterfall;104     105 })

main.js

define(function(require) {//require datavar Waterfall = require("waterfall");var data = require("data");var $ = require("jquery");//create para//get containervar _container = $(".photo-container");//data sourcevar _data = data.getData(100);//change your item template whatever you wantvar _itemTemplate = '<div class="item-box"><image class="base-img"></image></div>';//create instancevar 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};})

　　预览: