├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── js ├── jquery.waterfall.js └── jquery.waterfall.min.js ├── package.json └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea/ 3 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .travis.yml 2 | .DS_Store 3 | .idea 4 | node_modules 5 | .gitignore 6 | .npmignore -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: javascript -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 mufeng 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /js/jquery.waterfall.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name jQuery waterfall Plugin 3 | * @version 1.0.7 4 | * @create 2012.1.30 5 | * @lastmodified 2013.10.13 6 | * @description Based on jQuery 1.4+ 7 | * @author MuFeng (http://mufeng.me) 8 | * @url http://mufeng.me/waterfall.html 9 | **/ 10 | ;function($){ 11 | /** 12 | * 13 | * @param array: 全局数组,储存参数 14 | * @param x: 插件设置, y: 对象集合, Water: 构造函数 15 | * 16 | **/ 17 | 18 | var array, Water=function(x,y){ 19 | this.options = x; 20 | this.element = $(y); 21 | this.fun = ""; 22 | this.init(); 23 | }; 24 | Water.prototype={ 25 | init:function(){ // 初始化 26 | this.layout(); 27 | }, 28 | 29 | selector: function() { // 获取子元素 30 | var a = this.options.selector, 31 | b = this.element; 32 | return !a ? b.children().not('.waterfall') : b.filter(a).not('.waterfall').add(b.find(a)); 33 | }, 34 | 35 | measure:function(){ 36 | var _ = this, 37 | s0 = $(_.selector()[0]), 38 | 39 | isResizable = _.options.isResizable, 40 | 41 | col_count = _.options.columnCount, 42 | col_width = _.options.columnWidth, 43 | 44 | ele_width = s0.outerWidth(true), 45 | win_width = !isResizable ? _.element.width() : ($(window).width() - 20); // 减去滚动条宽度 46 | 47 | col_width = col_width || ele_width; // 子元素宽度 48 | col_count = col_count || parseInt(win_width/col_width); // 子元素列数 49 | 50 | _.element.css("position","relative"); 51 | 52 | if( isResizable ){ 53 | _.element.css({ 54 | "width": col_width * col_count, 55 | "margin-left": "auto", 56 | "margin-right": "auto" 57 | }); 58 | } 59 | 60 | return [col_width, col_count]; 61 | }, 62 | 63 | layout: function(){ 64 | 65 | var _ = this, 66 | b = _.measure(); 67 | 68 | array = array ? array : new Array(b[1]); 69 | 70 | $.each(array, function(index, value){ 71 | if( value === undefined ) array[index] = 0; 72 | }); 73 | 74 | _.selector().each(function(){ 75 | var _this = $(this), 76 | index = $.inArray(Math.min.apply(Math, array), array); 77 | 78 | _this.css({ 79 | left: index * b[0], 80 | top: array[index], 81 | position: "absolute" 82 | }).addClass('waterfall'); 83 | 84 | array[index] += _this.outerHeight(true); 85 | }); 86 | 87 | _.element.css("height", Math.max.apply(Math, array)); 88 | 89 | _.options.end.call(this); 90 | } 91 | 92 | }; 93 | $.waterfall=function(x,y){ 94 | x=$.extend({ 95 | selector: "", 96 | columnWidth: 0, 97 | columnCount: 0, 98 | isResizable: false, 99 | end: function(){} 100 | },x); 101 | $.data(y,'waterfall', new Water(x,y)); 102 | return y; 103 | }; 104 | $.fn.waterfall=function(x){ 105 | return $.waterfall(x,this); 106 | }; 107 | }(window.jQuery); -------------------------------------------------------------------------------- /js/jquery.waterfall.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name jQuery waterfall Plugin 3 | * @version 1.0.7 4 | * @create 2012.1.30 5 | * @lastmodified 2013.10.13 6 | * @description Based on jQuery 1.4+ 7 | * @author MuFeng (http://mufeng.me) 8 | * @url http://mufeng.me/waterfall.html 9 | **/ 10 | ~function(c){var a,e=function(b,d){this.options=b;this.element=c(d);this.fun="";this.init()};e.prototype={init:function(){this.layout()},selector:function(){var b=this.options.selector,d=this.element;return!b?d.children().not(".waterfall"):d.filter(b).not(".waterfall").add(d.find(b))},measure:function(){var b=c(this.selector()[0]),d=this.options.isResizable,a=this.options.columnCount,f=this.options.columnWidth,b=b.outerWidth(!0),e=!d?this.element.width():c(window).width()-20,f=f||b,a=a||parseInt(e/ 11 | f);this.element.css("position","relative");d&&this.element.css({width:f*a,"margin-left":"auto","margin-right":"auto"});return[f,a]},layout:function(){var b=this.measure();a=a?a:Array(b[1]);c.each(a,function(b,c){void 0===c&&(a[b]=0)});this.selector().each(function(){var d=c(this),e=c.inArray(Math.min.apply(Math,a),a);d.css({left:e*b[0],top:a[e],position:"absolute"}).addClass("waterfall");a[e]+=d.outerHeight(!0)});this.element.css("height",Math.max.apply(Math,a));this.options.end.call(this)}};c.waterfall= 12 | function(b,a){b=c.extend({selector:"",columnWidth:0,columnCount:0,isResizable:!1,end:function(){}},b);c.data(a,"waterfall",new e(b,a));return a};c.fn.waterfall=function(a){return c.waterfall(a,this)}}(jQuery); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-waterfall", 3 | "version": "1.0.7", 4 | "description": "jQuery waterfall Plugin", 5 | "main": "js/jquery.waterfall.min.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/iMuFeng/Waterfall.git" 9 | }, 10 | "keywords": [ 11 | "jquery", 12 | "waterfall" 13 | ], 14 | "author": "Mufeng", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/iMuFeng/Waterfall/issues" 18 | }, 19 | "homepage": "https://github.com/iMuFeng/Waterfall#readme" 20 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ##Waterfall 是流体布局 jQuery 插件 2 | 3 | * 当前版本: 1.0.7 4 | * 更新时间: 2016.3.3 5 | 6 | ###安装方法 7 | ``` 8 | npm install jquery-waterfall --save 9 | ``` 10 | 11 | ###使用方法 12 | ``` 13 | var $ = require('jquery'); 14 | var waterfall = require('jquery-waterfall'); 15 | 16 | $node.waterfall({/* 此处为设置选项, 可留空 */}) 17 | ``` 18 | 19 | ###设置选项 20 | ``` 21 | { 22 | selector:'.post-home', //子元素class, 可留空 23 | columnCount:4, // 列数, 纯数字, 可留空 24 | columnWidth:300, // 列宽度, 纯数字, 可留空 25 | isResizable:false, // 自适应浏览器宽度, 默认false 26 | end:function(){}, // 回调函数 27 | } 28 | ``` 29 | --------------------------------------------------------------------------------