html代码
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="http://code.jquery.com/jquery-latest.js" ></script> <script src="pb.js" ></script> </head> <script> $(function(){ for(var i =1 ; i< 25; i++){ $(".images").append('<li><img src="images/'+i+'.jpg" \/></li>'); } //$(".images").image_uniform_scale(); $(".images").waterfall({column:4,width:300}); }) </script> <style> ul { list-style:none; margin-left:300px; height:auto; width:auto; } </style> <body> <ul class="images"> </ul> </body> </html>
JS代码
//瀑布流 (function($){ $.fn.extend({ /** **图片等比缩放 */ image_uniform_scale:function(options){ var _default = {percent:50,limit_width:200,limit_height:300}; var _options = $.extend({},_default,options); return $(this).each(function(){ var _this = $(this) ; if(parseInt(_options.percent) < 100){ _options.percent = _options.percent/100; } var images = _this.find("img"); images.each(function(i){ //获取图片的宽和高 var _width = this.width; var _height = this.height; var limit_width = _options.limit_width; var limit_height = _options.limit_height; var new_width = 0; var new_height = 0; if( _width/_height >= limit_width/limit_height ){//以宽度为基准缩放 if( _width > limit_width){//开始缩放 new_width = limit_width; new_height = (_height * limit_height)/_height; }else{//当宽度小于限定宽度，直接返回原始数值。 new_width = _width; new_height = _height; } } else{//以高度为基准缩放 if( _height > limit_height ){//开始缩放 new_width = ( _width * limit_width )/_width; new_height = limit_height; }else{//当高度小于限定高度，直接返回原始数值。 new_width = _width; new_height = _height; } } this.width = new_width; this.height = new_height; }); }); }, /** * * 瀑布流方式 */ waterfall:function(options){ _default = {column:4,width:200}; _options = $.extend({},_default,options); return $(this).each(function(){ var _this = $(this); var nodes = _this.children(); var contain_top = _this.offset().top;//获取装载img的容器的left,top作为基准点 var contain_left = _this.offset().left; //计算所有照片有多少行 var _row = Math.ceil(nodes.length/4); $(nodes).each(function(i){ //开始计算单独照片的定位 this.style.cssText = ''; $(this).css('width','200px'); var _top = _setTop(nodes,this,i,contain_top); var _left = _setLeft(nodes,this,i,contain_left); $(this).find('img').css('width',_options.width); $(this).css({'position':'absolute','left':_left,'top':_top}); }); }); function _setTop(nodes,node,index,contain_top){ var new_top = contain_top; switch(index){ case 0:;break; default: var row = _getRow(_options.column,index);//得到该元素在第几行 if(row > 1){ var offset = Math.abs(index - _options.column); new_top += $(nodes).eq(offset).offset().top + $(nodes).eq(offset).height(); } } return new_top; } function _setLeft(nodes,node,index,contain_left){ var new_left = contain_left; switch(index){ case 0:;break; default: var column_index = _columnIndexInRow(index);//得到该行的列索引 new_left += (column_index-1) * _options.width; } return new_left; } function _getRow(column,index){ var row = Math.ceil((index+1)/column); return row; } function _columnIndexInRow(index){ var row = _getRow(_options.column,index); index += 1; var uprow = row - 1; return index-uprow*_options.column; } } }); })(jQuery);
