├── README.md ├── bower.json ├── jquery.vgrid.js └── jquery.vgrid.min.js /README.md: -------------------------------------------------------------------------------- 1 | #jQuery vGrid Plugin 2 | 3 | [blog(ja)](http://blog.xlune.com/2009/09/jqueryvgrid.html "Blog") 4 | 5 | [demo index](http://blog.xlune.com/2009/09/vgrid/ "DEMO INDEX") 6 | 7 | ---- 8 | ###USAGE EXAMPLE 9 | 10 | $(function(){ 11 | $("#container").vgrid({ 12 | easing: "easeOutQuint", 13 | time: 500, 14 | delay: 20, 15 | fadeIn: { 16 | time: 300, 17 | delay: 50 18 | } 19 | }); 20 | }); 21 | 22 | [Learn more (demo index)](http://blog.xlune.com/2009/09/vgrid/ "DEMO INDEX") 23 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jQuery-vGrid-Plugin", 3 | "version": "0.1.11", 4 | "homepage": "https://github.com/xlune/jQuery-vGrid-Plugin", 5 | "authors": [ 6 | "xlune" 7 | ], 8 | "description": "jquery variable grid layout plugin", 9 | "main": "jquery.vgrid.min.js", 10 | "keywords": [ 11 | "jquery", 12 | "grid", 13 | "layout", 14 | "plugin" 15 | ], 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests" 23 | ], 24 | "dependencies": { "jquery": "latest" } 25 | } 26 | -------------------------------------------------------------------------------- /jquery.vgrid.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery VGrid v0.1.11 - variable grid layout plugin 3 | * 4 | * Terms of Use - jQuery VGrid 5 | * under the MIT (http://www.opensource.org/licenses/mit-license.php) License. 6 | * 7 | * Copyright 2009-2013 xlune.com All rights reserved. 8 | * (http://blog.xlune.com/2009/09/jqueryvgrid.html) 9 | */ 10 | (function($) 11 | { 12 | function makePos(self) 13 | { 14 | var _childs = self.data("_vgchild"); 15 | var _width = self.width(); 16 | var _matrix = [[0,_width,0]]; 17 | var _hmax=0, _c, _size, _point; 18 | _childs.each(function(i) 19 | { 20 | _c = $(this); 21 | if(_c.css("display") === "none"){ 22 | return true; 23 | } 24 | _size = getSize(_c); 25 | _point = getAttachPoint(_matrix, _size[0]); 26 | _matrix = updateAttachArea(_matrix, _point, _size); 27 | _hmax = Math.max(_hmax, _point[1] + _size[1]); 28 | _c.data("_vgleft", _point[0]); 29 | _c.data("_vgtop", _point[1]); 30 | }); 31 | self.data("_vgwrapheight", _hmax); 32 | heightTo(self); 33 | }; 34 | function getAttachPoint(mtx, width) 35 | { 36 | var _mtx = mtx.concat().sort(matrixSortDepth); 37 | var _max = _mtx[_mtx.length-1][2]; 38 | for(var i=0,imax=_mtx.length; i= _max) break; 41 | if(_mtx[i][1]-_mtx[i][0] >= width) 42 | { 43 | return [_mtx[i][0], _mtx[i][2]]; 44 | } 45 | } 46 | return [0, _max]; 47 | }; 48 | function updateAttachArea(mtx, point, size) 49 | { 50 | var _mtx = mtx.concat().sort(matrixSortDepth); 51 | var _cell = [point[0], point[0]+size[0], point[1]+size[1]]; 52 | for(var i=0,imax=_mtx.length; i b[0]) || a[2] > b[2]) ? 1 : -1; 69 | }; 70 | function matrixSortX(a, b) 71 | { 72 | if(!a || !b) return 0; 73 | return (a[0] > b[0]) ? 1 : -1; 74 | }; 75 | function matrixJoin(mtx, cell) 76 | { 77 | var _mtx = mtx.concat([cell]).sort(matrixSortX); 78 | var _mtx_join = []; 79 | for(var i=0,imax=_mtx.length; i 0 83 | && _mtx_join[_mtx_join.length-1][1] === _mtx[i][0] 84 | && _mtx_join[_mtx_join.length-1][2] === _mtx[i][2]) 85 | { 86 | _mtx_join[_mtx_join.length-1][1] = _mtx[i][1]; 87 | } 88 | else 89 | { 90 | _mtx_join.push(_mtx[i]); 91 | } 92 | } 93 | return _mtx_join; 94 | }; 95 | function matrixTrimWidth(a, b) 96 | { 97 | if(a[0] >= b[0] && a[0] < b[1] || a[1] >= b[0] && a[1] < b[1]) 98 | { 99 | if(a[0] >= b[0] && a[0] < b[1]) 100 | { 101 | a[0] = b[1]; 102 | } 103 | else 104 | { 105 | a[1] = b[0]; 106 | } 107 | } 108 | return a; 109 | }; 110 | function getSize(child) 111 | { 112 | var _w = child.width(); 113 | var _h = child.height(); 114 | _w += strToNum(child.css("margin-left")) 115 | + strToNum(child.css("padding-left")) 116 | + strToNum(child.css("border-left-width")) 117 | + strToNum(child.css("margin-right")) 118 | + strToNum(child.css("padding-right")) 119 | + strToNum(child.css("border-right-width")); 120 | _h += strToNum(child.css("margin-top")) 121 | + strToNum(child.css("padding-top")) 122 | + strToNum(child.css("border-top-width")) 123 | + strToNum(child.css("margin-bottom")) 124 | + strToNum(child.css("padding-bottom")) 125 | + strToNum(child.css("border-bottom-width")); 126 | return [_w, _h]; 127 | }; 128 | function strToNum(str){ 129 | var num = parseInt(str, 10); 130 | if(isNaN(num)){ 131 | return 0 132 | } 133 | return num; 134 | } 135 | function getNumValue(val, def){ 136 | def = typeof(def) === "number" && isFinite(def) ? def : 0 ; 137 | val = typeof(val) === "number" && isFinite(val) ? val : def ; 138 | return val; 139 | }; 140 | function heightTo(self) 141 | { 142 | var _self = self; 143 | var _easeTime = getNumValue(_self.data("_vgopt").time, 500); 144 | var _delay = _self.data("_vgchild").length 145 | * (_self.data("_vgopt").delay || 0) 146 | + _easeTime; 147 | _self.stop(false, true); 148 | if(_self.height() < _self.data("_vgwrapheight")) 149 | { 150 | if(!$.support.noCloneEvent) 151 | { 152 | _self.height(_self.data("_vgwrapheight")); 153 | } 154 | else 155 | { 156 | _self.animate( 157 | { 158 | height: _self.data("_vgwrapheight")+"px" 159 | }, 160 | _easeTime, 161 | "easeOutQuart" 162 | ); 163 | } 164 | } 165 | else 166 | { 167 | clearTimeout(_self.data("_vgwraptimeout")); 168 | _self.data("_vgwraptimeout", setTimeout(function(){ 169 | if(!$.support.noCloneEvent) 170 | { 171 | _self.height(_self.data("_vgwrapheight")); 172 | } 173 | else 174 | { 175 | _self.animate( 176 | { 177 | height: _self.data("_vgwrapheight")+"px" 178 | }, 179 | _easeTime, 180 | "easeOutQuart" 181 | ); 182 | } 183 | }, _delay)); 184 | } 185 | }; 186 | function moveTo(childs) 187 | { 188 | var _c; 189 | childs.each(function(i) 190 | { 191 | _c = $(this); 192 | _c.css("left", _c.data("_vgleft")+"px"); 193 | _c.css("top", _c.data("_vgtop")+"px"); 194 | }); 195 | }; 196 | function animateTo(childs, easing, time, delay) 197 | { 198 | var _self = $(childs).parent(); 199 | var isMove = false; 200 | var imax = childs.length; 201 | var i,_c,_pos; 202 | for(i=0; i") 257 | .text(" ") 258 | .attr("id", "_vgridspan") 259 | .hide() 260 | .appendTo("body"); 261 | s.data("size", s.css("font-size")); 262 | s.data("timer", setInterval(function(){ 263 | if(s.css("font-size") != s.data("size")) 264 | { 265 | s.data("size", s.css("font-size")); 266 | func(self); 267 | } 268 | }, 1000)); 269 | }; 270 | function setImgLoadEvent(self, func) 271 | { 272 | if(!self.data("vgrid-image-event-added")){ 273 | self.data("vgrid-image-event-added", 1); 274 | self.on("vgrid-added", function(){ 275 | self.find("img").each(function(){ 276 | var img = $(this); 277 | if(!img.data("vgrid-image-handler")){ 278 | img.data("vgrid-image-handler", 1); 279 | img.on("load", function(){ 280 | func(self); 281 | }); 282 | } 283 | }); 284 | }); 285 | } 286 | self.trigger("vgrid-added"); 287 | var _append = self.append; 288 | var _prepend = self.prepend; 289 | self.append = function(){ 290 | _append.apply(self, arguments); 291 | self.trigger("vgrid-added"); 292 | }; 293 | self.prepend = function(){ 294 | _prepend.apply(self, arguments); 295 | self.trigger("vgrid-added"); 296 | }; 297 | }; 298 | $.fn.extend({ 299 | vgrid: function(option) 300 | { 301 | var _target = $(this); 302 | var _opt = option || {}; 303 | if (_opt.easeing) { 304 | _opt.easing = _opt.easeing; 305 | } 306 | _target.each(function(){ 307 | var _self = $(this); 308 | _self.data("_vgopt", _opt); 309 | _self.data("_vgchild", _self.find("> *")); 310 | _self.data("_vgdefchild", _self.data("_vgchild")); 311 | _self.css({ 312 | "position": "relative", 313 | "width": "auto" 314 | }); 315 | _self.data("_vgchild").css("position", "absolute"); 316 | makePos(_self); 317 | moveTo(_self.data("_vgchild")); 318 | if(_self.data("_vgopt").fadeIn) 319 | { 320 | var _prop = (typeof(_self.data("_vgopt").fadeIn) === "object") 321 | ? _self.data("_vgopt").fadeIn 322 | : {time: _self.data("_vgopt").fadeIn} ; 323 | _self.data("_vgchild").each(function(i) 324 | { 325 | var _c = $(this); 326 | if(_c.css("display") === "none"){ 327 | return true; 328 | } 329 | _c.stop(false, true).css({opacity:0}); 330 | setTimeout(function(){ 331 | _c.stop(false, true).fadeTo(_prop.time || 250, 1); 332 | }, i * (_prop.delay || 0)); 333 | }); 334 | } 335 | $(window).resize(function(e) 336 | { 337 | refreshHandler(_self); 338 | }); 339 | if(_opt.useLoadImageEvent) setImgLoadEvent(_self, refreshHandler); 340 | if(_opt.useFontSizeListener) setFontSizeListener(_self, refreshHandler); 341 | }); 342 | return _target; 343 | }, 344 | vgrefresh: function(easing, time, delay, func) 345 | { 346 | var _target = $(this); 347 | _target.each(function(){ 348 | var _obj = $(this); 349 | var _opt = _obj.data("_vgopt") || {}; 350 | if(_obj.data("_vgchild")) 351 | { 352 | _obj.data("_vgchild", _obj.find("> *")); 353 | _obj.data("_vgchild").css("position", "absolute"); 354 | makePos(_obj); 355 | time = getNumValue(time, getNumValue(_obj.data("_vgopt").time, 500)); 356 | delay = getNumValue(delay, getNumValue(_obj.data("_vgopt").delay, 0)); 357 | animateTo( 358 | _obj.data("_vgchild"), 359 | easing || _obj.data("_vgopt").easing || "linear", 360 | time, 361 | delay 362 | ); 363 | if(typeof(func) === 'function') 364 | { 365 | setTimeout( 366 | func, 367 | _obj.data("_vgchild").length * delay + time 368 | ); 369 | } 370 | } 371 | if(_opt.useLoadImageEvent) setImgLoadEvent(_obj, refreshHandler); 372 | }); 373 | return _target; 374 | }, 375 | vgsort: function(func, easing, time, delay) 376 | { 377 | var _target = $(this); 378 | _target.each(function(){ 379 | var _obj = $(this); 380 | if(_obj.data("_vgchild")) 381 | { 382 | _obj.data("_vgchild", _obj.data("_vgchild").sort(func)); 383 | _obj.data("_vgchild").each(function(num){ 384 | $(this).appendTo(_obj); 385 | }); 386 | makePos(_obj); 387 | animateTo( 388 | _obj.data("_vgchild"), 389 | easing || _obj.data("_vgopt").easing || "linear", 390 | getNumValue(time, getNumValue(_obj.data("_vgopt").time, 500)), 391 | getNumValue(delay, getNumValue(_obj.data("_vgopt").delay, 0)) 392 | ); 393 | } 394 | }); 395 | return _target; 396 | } 397 | }); 398 | })(jQuery); 399 | -------------------------------------------------------------------------------- /jquery.vgrid.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery VGrid v0.1.11 - variable grid layout plugin 3 | * 4 | * Terms of Use - jQuery VGrid 5 | * under the MIT (http://www.opensource.org/licenses/mit-license.php) License. 6 | * 7 | * Copyright 2009-2013 xlune.com All rights reserved. 8 | * (http://blog.xlune.com/2009/09/jqueryvgrid.html) 9 | */ 10 | ;(function(i){function a(v){var s=v.data("_vgchild");var r=v.width();var y=[[0,r,0]];var w=0,u,t,x;s.each(function(z){u=i(this);if(u.css("display")==="none"){return true; 11 | }t=q(u);x=f(y,t[0]);y=m(y,x,t);w=Math.max(w,x[1]+t[1]);u.data("_vgleft",x[0]);u.data("_vgtop",x[1]);});v.data("_vgwrapheight",w);g(v);}function f(v,u){var w=v.concat().sort(k); 12 | var r=w[w.length-1][2];for(var t=0,s=w.length;t=r){break;}if(w[t][1]-w[t][0]>=u){return[w[t][0],w[t][2]];}}return[0,r];}function m(v,r,u){var w=v.concat().sort(k); 13 | var x=[r[0],r[0]+u[0],r[1]+u[1]];for(var t=0,s=w.length;tr[0])||s[2]>r[2])?1:-1;}function c(s,r){if(!s||!r){return 0;}return(s[0]>r[0])?1:-1;}function d(v,r){var w=v.concat([r]).sort(c); 15 | var s=[];for(var u=0,t=w.length;u0&&s[s.length-1][1]===w[u][0]&&s[s.length-1][2]===w[u][2]){s[s.length-1][1]=w[u][1]; 16 | }else{s.push(w[u]);}}return s;}function b(s,r){if(s[0]>=r[0]&&s[0]=r[0]&&s[1]=r[0]&&s[0]").text(" ").attr("id","_vgridspan").hide().appendTo("body");t.data("size",t.css("font-size")); 28 | t.data("timer",setInterval(function(){if(t.css("font-size")!=t.data("size")){t.data("size",t.css("font-size"));u(r);}},1000));}function l(r,t){if(!r.data("vgrid-image-event-added")){r.data("vgrid-image-event-added",1); 29 | r.on("vgrid-added",function(){r.find("img").each(function(){var v=i(this);if(!v.data("vgrid-image-handler")){v.data("vgrid-image-handler",1);v.on("load",function(){t(r); 30 | });}});});}r.trigger("vgrid-added");var s=r.append;var u=r.prepend;r.append=function(){s.apply(r,arguments);r.trigger("vgrid-added");};r.prepend=function(){u.apply(r,arguments); 31 | r.trigger("vgrid-added");};}i.fn.extend({vgrid:function(t){var r=i(this);var s=t||{};if(s.easeing){s.easing=s.easeing;}r.each(function(){var u=i(this); 32 | u.data("_vgopt",s);u.data("_vgchild",u.find("> *"));u.data("_vgdefchild",u.data("_vgchild"));u.css({position:"relative",width:"auto"});u.data("_vgchild").css("position","absolute"); 33 | a(u);p(u.data("_vgchild"));if(u.data("_vgopt").fadeIn){var v=(typeof(u.data("_vgopt").fadeIn)==="object")?u.data("_vgopt").fadeIn:{time:u.data("_vgopt").fadeIn}; 34 | u.data("_vgchild").each(function(x){var w=i(this);if(w.css("display")==="none"){return true;}w.stop(false,true).css({opacity:0});setTimeout(function(){w.stop(false,true).fadeTo(v.time||250,1); 35 | },x*(v.delay||0));});}i(window).resize(function(w){j(u);});if(s.useLoadImageEvent){l(u,j);}if(s.useFontSizeListener){n(u,j);}});return r;},vgrefresh:function(v,u,s,t){var r=i(this); 36 | r.each(function(){var x=i(this);var w=x.data("_vgopt")||{};if(x.data("_vgchild")){x.data("_vgchild",x.find("> *"));x.data("_vgchild").css("position","absolute"); 37 | a(x);u=e(u,e(x.data("_vgopt").time,500));s=e(s,e(x.data("_vgopt").delay,0));o(x.data("_vgchild"),v||x.data("_vgopt").easing||"linear",u,s);if(typeof(t)==="function"){setTimeout(t,x.data("_vgchild").length*s+u); 38 | }}if(w.useLoadImageEvent){l(x,j);}});return r;},vgsort:function(t,v,u,s){var r=i(this);r.each(function(){var w=i(this);if(w.data("_vgchild")){w.data("_vgchild",w.data("_vgchild").sort(t)); 39 | w.data("_vgchild").each(function(x){i(this).appendTo(w);});a(w);o(w.data("_vgchild"),v||w.data("_vgopt").easing||"linear",e(u,e(w.data("_vgopt").time,500)),e(s,e(w.data("_vgopt").delay,0))); 40 | }});return r;}});})(jQuery); --------------------------------------------------------------------------------