├── i └── download.png ├── readme.md ├── c ├── gs.css ├── style.css └── gs-reference.css ├── t └── background-load.html ├── j ├── jquery.stalactite.min.js └── jquery.stalactite.js └── index.html /i/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonobr1/stalactite/HEAD/i/download.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## stalactite 2 | 3 | For most up-to-date information check out the public facing [page](http://jonobr1.github.com/stalactite). 4 | 5 | By [jonobr1](http://jonobr1.com/) and [jQuery](http://jquery.com/) -------------------------------------------------------------------------------- /c/gs.css: -------------------------------------------------------------------------------- 1 | .container_9{margin-left:auto;margin-right:auto;width:945px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9{display:inline;float:left;position:relative;margin-left:3px;margin-right:2px}.alpha{margin-left:0}.omega{margin-right:0}.container_9 .grid_1{width:100px}.container_9 .grid_2{width:205px}.container_9 .grid_3{width:310px}.container_9 .grid_4{width:415px}.container_9 .grid_5{width:520px}.container_9 .grid_6{width:625px}.container_9 .grid_7{width:730px}.container_9 .grid_8{width:835px}.container_9 .grid_9{width:940px}.container_9 .prefix_1{padding-left:105px}.container_9 .prefix_2{padding-left:210px}.container_9 .prefix_3{padding-left:315px}.container_9 .prefix_4{padding-left:420px}.container_9 .prefix_5{padding-left:525px}.container_9 .prefix_6{padding-left:630px}.container_9 .prefix_7{padding-left:735px}.container_9 .prefix_8{padding-left:840px}.container_9 .suffix_1{padding-right:105px}.container_9 .suffix_2{padding-right:210px}.container_9 .suffix_3{padding-right:315px}.container_9 .suffix_4{padding-right:420px}.container_9 .suffix_5{padding-right:525px}.container_9 .suffix_6{padding-right:630px}.container_9 .suffix_7{padding-right:735px}.container_9 .suffix_8{padding-right:840px}.container_9 .push_1{left:105px}.container_9 .push_2{left:210px}.container_9 .push_3{left:315px}.container_9 .push_4{left:420px}.container_9 .push_5{left:525px}.container_9 .push_6{left:630px}.container_9 .push_7{left:735px}.container_9 .push_8{left:840px}.container_9 .pull_1{left:-105px}.container_9 .pull_2{left:-210px}.container_9 .pull_3{left:-315px}.container_9 .pull_4{left:-420px}.container_9 .pull_5{left:-525px}.container_9 .pull_6{left:-630px}.container_9 .pull_7{left:-735px}.container_9 .pull_8{left:-840px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block} -------------------------------------------------------------------------------- /t/background-load.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Does $.load method listen to background images? 5 | 6 | 7 | 29 | 30 | 31 | 57 | 58 | 59 | 60 |

Background image applied in <styles> in the head:
Background image applied via JavaScript:
Element placed by jQuery:
$.load methods triggered:

69 | 70 | -------------------------------------------------------------------------------- /c/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-family: Helvetica, Arial, sans-serif; 8 | font-weight: 500; 9 | word-spacing: 2px; 10 | font-size: 11px; 11 | color: #333; 12 | /* background: #fff url('../i/stalactite.png') top right no-repeat;*/ 13 | } 14 | 15 | h2 { 16 | color: #444; 17 | font-size: 20px; 18 | line-height: 30px; 19 | font-weight: 500; 20 | word-spacing: 1px; 21 | } 22 | 23 | h3.active { 24 | background: #999; 25 | } 26 | 27 | h3 { 28 | 29 | width: 200px; 30 | margin: 5px 0; 31 | padding: 5px; 32 | text-align: center; 33 | text-transform: uppercase; 34 | letter-spacing: 2px; 35 | font-weight: 100; 36 | text-align: left; 37 | font-size: 10px; 38 | 39 | background: #ccc; 40 | color: #fff; 41 | 42 | -webkit-border-radius: 5px; 43 | -moz-border-radius: 5px; 44 | border-radius: 5px; 45 | } 46 | 47 | h3 a:link, h3 a:visited { 48 | color: #fff; 49 | text-decoration: none; 50 | } 51 | h3 a:hover, h3 a:active { 52 | background: none; 53 | color: #fff; 54 | text-decoration: underline; 55 | } 56 | 57 | p { 58 | margin: 0 0 25px 0; 59 | line-height: 17px; 60 | font-size: 11px; 61 | } 62 | 63 | img { 64 | border: 0 !important; 65 | } 66 | 67 | a#download:link, a#download:visited { 68 | margin-top: -20px; 69 | display: block; 70 | width: 100px; 71 | height: 100px; 72 | 73 | border: 1px dashed #333; 74 | -webkit-border-radius: 100px; 75 | -moz-border-radius: 100px; 76 | border-radius: 100px; 77 | } 78 | 79 | a#download:hover, a#download:active { 80 | background: #efefef; 81 | } 82 | 83 | .mute { font-size: 9px; color: #444; } 84 | 85 | a:link, a:visited { 86 | text-decoration: underline; 87 | color: #333; 88 | } 89 | a:hover, a:active { 90 | text-decoration: none; 91 | background: #ff0; 92 | } 93 | 94 | .container_9 {; 95 | border-bottom: 1px solid #efefef; 96 | } 97 | 98 | #text_cascade .character { 99 | 100 | height: 55px; 101 | float: left; 102 | 103 | text-transform: uppercase; 104 | font-weight: 900; 105 | letter-spacing: 2px; 106 | text-align: center; 107 | 108 | color: #333; 109 | background: #ccc; 110 | 111 | padding: 45px 0 0 0; 112 | margin: 2px 3px 2px 2px; 113 | } 114 | 115 | #text_cascade .character:hover { 116 | background: #efefef; 117 | } 118 | 119 | .content { 120 | text-align: left; 121 | } 122 | .content * { 123 | padding: 5px; 124 | } 125 | 126 | .container_9 .grid6 { 127 | width: 625px; 128 | } 129 | .container_9 .grid9 { 130 | width: 940px; 131 | } 132 | .container_9 .grid4 { 133 | width: 415px; 134 | } 135 | 136 | footer, .section { 137 | margin-top: 50px; 138 | margin-bottom: 50px; 139 | } -------------------------------------------------------------------------------- /j/jquery.stalactite.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery Stalactite : Lightweight Element Packing 3 | * Examples and documentation at: http://jonobr1.github.com/stalactite 4 | * Copyright (c) 2011 Jono Brandel 5 | * Version: 0.1 (8-SEPTEMBER-2011) 6 | * Requires: jQuery v1.6.2 or later 7 | * 8 | * Copyright 2011 jonobr1 9 | * 10 | * Licensed under the Apache License, Version 2.0 (the "License"); 11 | * you may not use this file except in compliance with the License. 12 | * You may obtain a copy of the License at 13 | * 14 | * http://www.apache.org/licenses/LICENSE-2.0 15 | * 16 | * Unless required by applicable law or agreed to in writing, software 17 | * distributed under the License is distributed on an "AS IS" BASIS, 18 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 19 | * See the License for the specific language governing permissions and 20 | * limitations under the License. 21 | */ 22 | 23 | (function(a){function D(h){h=h[0];for(var a=0;a=e.length&&(e=a('

'));e.css({position:"absolute",top:d,left:b}).html(c.loader).appendTo("body");e.find("img").bind("load",function(){e.fadeIn()})}function n(d,b,e){b=a.extend({},b,c.styles);b.opacity==d.css("opacity")&&delete b.opacity;d.css("z-index","auto").stop().animate(b, 25 | c.duration,c.easing,e)}var r=!1,c=a.extend({},a.fn.stalactite.defaultOptions,h);c.cssSelector=c.cssPrefix+"-loaded";return this.each(function(){function d(b,e,h,f,p){if(p>=b.length)c.complete.apply(this),a(c.cssPrefix+"-loader").fadeOut();else if(r&&c.fluid)a(c.cssPrefix+"-loader").fadeOut();else{var q=a(b[p]),g=a(b[p-1]),l=q.outerWidth(!0),t=q.outerHeight(!0),m=q.outerWidth(),w=q.outerHeight(),u=Math.max(l,m),y=Math.max(t,w),v=l-m,z=t-w,t=q.offset().left-v,w=t+u,l=q.offset().top-z;0=h;A--)g=a(b[A]),u=g.outerWidth(!0),y=g.outerHeight(!0),v=u-g.outerWidth(),z=y-g.outerHeight(),v=g.offset().left-v,u=v+u,g=g.offset().top-z+y,v>=w||u<=t||m', 29 | styles:{},complete:function(a){return a}}})(jQuery); -------------------------------------------------------------------------------- /c/gs-reference.css: -------------------------------------------------------------------------------- 1 | /* 2 | Variable Grid System. 3 | Learn more ~ http://www.spry-soft.com/grids/ 4 | Based on 960 Grid System - http://960.gs/ 5 | 6 | Licensed under GPL and MIT. 7 | */ 8 | 9 | 10 | /* Containers 11 | ----------------------------------------------------------------------------------------------------*/ 12 | .container_9 { 13 | margin-left: auto; 14 | margin-right: auto; 15 | width: 945px; 16 | } 17 | 18 | /* Grid >> Global 19 | ----------------------------------------------------------------------------------------------------*/ 20 | 21 | .grid_1, 22 | .grid_2, 23 | .grid_3, 24 | .grid_4, 25 | .grid_5, 26 | .grid_6, 27 | .grid_7, 28 | .grid_8, 29 | .grid_9 { 30 | display:inline; 31 | float: left; 32 | position: relative; 33 | margin-left: 3px; 34 | margin-right: 2px; 35 | } 36 | 37 | /* Grid >> Children (Alpha ~ First, Omega ~ Last) 38 | ----------------------------------------------------------------------------------------------------*/ 39 | 40 | .alpha { 41 | margin-left: 0; 42 | } 43 | 44 | .omega { 45 | margin-right: 0; 46 | } 47 | 48 | /* Grid >> 9 Columns 49 | ----------------------------------------------------------------------------------------------------*/ 50 | 51 | .container_9 .grid_1 { 52 | width:100px; 53 | } 54 | 55 | .container_9 .grid_2 { 56 | width:205px; 57 | } 58 | 59 | .container_9 .grid_3 { 60 | width:310px; 61 | } 62 | 63 | .container_9 .grid_4 { 64 | width:415px; 65 | } 66 | 67 | .container_9 .grid_5 { 68 | width:520px; 69 | } 70 | 71 | .container_9 .grid_6 { 72 | width:625px; 73 | } 74 | 75 | .container_9 .grid_7 { 76 | width:730px; 77 | } 78 | 79 | .container_9 .grid_8 { 80 | width:835px; 81 | } 82 | 83 | .container_9 .grid_9 { 84 | width:940px; 85 | } 86 | 87 | 88 | 89 | /* Prefix Extra Space >> 9 Columns 90 | ----------------------------------------------------------------------------------------------------*/ 91 | 92 | .container_9 .prefix_1 { 93 | padding-left:105px; 94 | } 95 | 96 | .container_9 .prefix_2 { 97 | padding-left:210px; 98 | } 99 | 100 | .container_9 .prefix_3 { 101 | padding-left:315px; 102 | } 103 | 104 | .container_9 .prefix_4 { 105 | padding-left:420px; 106 | } 107 | 108 | .container_9 .prefix_5 { 109 | padding-left:525px; 110 | } 111 | 112 | .container_9 .prefix_6 { 113 | padding-left:630px; 114 | } 115 | 116 | .container_9 .prefix_7 { 117 | padding-left:735px; 118 | } 119 | 120 | .container_9 .prefix_8 { 121 | padding-left:840px; 122 | } 123 | 124 | 125 | 126 | /* Suffix Extra Space >> 9 Columns 127 | ----------------------------------------------------------------------------------------------------*/ 128 | 129 | .container_9 .suffix_1 { 130 | padding-right:105px; 131 | } 132 | 133 | .container_9 .suffix_2 { 134 | padding-right:210px; 135 | } 136 | 137 | .container_9 .suffix_3 { 138 | padding-right:315px; 139 | } 140 | 141 | .container_9 .suffix_4 { 142 | padding-right:420px; 143 | } 144 | 145 | .container_9 .suffix_5 { 146 | padding-right:525px; 147 | } 148 | 149 | .container_9 .suffix_6 { 150 | padding-right:630px; 151 | } 152 | 153 | .container_9 .suffix_7 { 154 | padding-right:735px; 155 | } 156 | 157 | .container_9 .suffix_8 { 158 | padding-right:840px; 159 | } 160 | 161 | 162 | 163 | /* Push Space >> 9 Columns 164 | ----------------------------------------------------------------------------------------------------*/ 165 | 166 | .container_9 .push_1 { 167 | left:105px; 168 | } 169 | 170 | .container_9 .push_2 { 171 | left:210px; 172 | } 173 | 174 | .container_9 .push_3 { 175 | left:315px; 176 | } 177 | 178 | .container_9 .push_4 { 179 | left:420px; 180 | } 181 | 182 | .container_9 .push_5 { 183 | left:525px; 184 | } 185 | 186 | .container_9 .push_6 { 187 | left:630px; 188 | } 189 | 190 | .container_9 .push_7 { 191 | left:735px; 192 | } 193 | 194 | .container_9 .push_8 { 195 | left:840px; 196 | } 197 | 198 | 199 | 200 | /* Pull Space >> 9 Columns 201 | ----------------------------------------------------------------------------------------------------*/ 202 | 203 | .container_9 .pull_1 { 204 | left:-105px; 205 | } 206 | 207 | .container_9 .pull_2 { 208 | left:-210px; 209 | } 210 | 211 | .container_9 .pull_3 { 212 | left:-315px; 213 | } 214 | 215 | .container_9 .pull_4 { 216 | left:-420px; 217 | } 218 | 219 | .container_9 .pull_5 { 220 | left:-525px; 221 | } 222 | 223 | .container_9 .pull_6 { 224 | left:-630px; 225 | } 226 | 227 | .container_9 .pull_7 { 228 | left:-735px; 229 | } 230 | 231 | .container_9 .pull_8 { 232 | left:-840px; 233 | } 234 | 235 | 236 | 237 | 238 | /* Clear Floated Elements 239 | ----------------------------------------------------------------------------------------------------*/ 240 | 241 | /* http://sonspring.com/journal/clearing-floats */ 242 | 243 | .clear { 244 | clear: both; 245 | display: block; 246 | overflow: hidden; 247 | visibility: hidden; 248 | width: 0; 249 | height: 0; 250 | } 251 | 252 | /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */ 253 | 254 | .clearfix:after { 255 | clear: both; 256 | content: ' '; 257 | display: block; 258 | font-size: 0; 259 | line-height: 0; 260 | visibility: hidden; 261 | width: 0; 262 | height: 0; 263 | } 264 | 265 | .clearfix { 266 | display: inline-block; 267 | } 268 | 269 | * html .clearfix { 270 | height: 1%; 271 | } 272 | 273 | .clearfix { 274 | display: block; 275 | } -------------------------------------------------------------------------------- /j/jquery.stalactite.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery Stalactite : Lightweight Element Packing 3 | * Examples and documentation at: http://jonobr1.github.com/stalactite 4 | * Copyright (c) 2011 Jono Brandel 5 | * Version: 0.1 (8-SEPTEMBER-2011) 6 | * Requires: jQuery v1.6.2 or later 7 | * 8 | * Copyright 2011 jonobr1 9 | * 10 | * Licensed under the Apache License, Version 2.0 (the "License"); 11 | * you may not use this file except in compliance with the License. 12 | * You may obtain a copy of the License at 13 | * 14 | * http://www.apache.org/licenses/LICENSE-2.0 15 | * 16 | * Unless required by applicable law or agreed to in writing, software 17 | * distributed under the License is distributed on an "AS IS" BASIS, 18 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 19 | * See the License for the specific language governing permissions and 20 | * limitations under the License. 21 | */ 22 | 23 | (function($) { 24 | 25 | var indexed = []; // List of all dom elements already applied. 26 | 27 | $.fn.stalactite = function(customOptions) { 28 | 29 | var resizing = false; 30 | var options = $.extend({}, $.fn.stalactite.defaultOptions, customOptions); 31 | options.cssSelector = options.cssPrefix + '-loaded'; 32 | 33 | return this.each(function() { 34 | 35 | // Store "private" variables in this object. 36 | if (!this._stalactite) { 37 | this._stalactite = {}; 38 | } 39 | 40 | var $this = $(this); 41 | var packTimeout = null; 42 | var $newElems = prep($this, options); 43 | appendLoader($this); 44 | 45 | var prevThisIndex = index($this); 46 | var params = { 47 | row: 0, 48 | prevMinIndex: 0, 49 | prevMaxIndex: 0, 50 | i: 0 51 | }; 52 | 53 | // Check for elements already packed. 54 | if (prevThisIndex >= 0) { 55 | 56 | if ($this.children().index($newElems[0]) > 0) { 57 | params = indexed[prevThisIndex]; 58 | } 59 | 60 | } 61 | 62 | var row = params.row; 63 | 64 | // Bind events for window resizing 65 | if (options.fluid && !this._stalactite.listening) { 66 | $this.css('width', 'auto'); 67 | this._stalactite.packTimeout = function() { 68 | resizing = false; 69 | packTimeout = null; 70 | row = 0; 71 | params = { 72 | row: 0, 73 | prevMinIndex: 0, 74 | prevMaxIndex: 0, 75 | i: 0 76 | }; 77 | indexed = []; 78 | pack($this, calculateOffset, params, options); 79 | }; 80 | this._stalactite.resize = function() { 81 | if (packTimeout) { 82 | clearTimeout(packTimeout); 83 | } else { 84 | appendLoader($this); 85 | } 86 | resizing = true; 87 | packTimeout = setTimeout($this[0]._stalactite.packTimeout, 2000); 88 | }; 89 | $(window).bind('resize', this._stalactite.resize); 90 | this._stalactite.listening = true; 91 | } else if (!options.fluid && this._stalactite.listening) { 92 | // Stop listening to the window resize event. 93 | $(window).unbind(this._stalactite.resize); 94 | } 95 | 96 | // Gather all assets in the element 97 | var selector = 'img, embed, iframe, audio, video, div'; 98 | var $assets = $this 99 | .children() 100 | .not(options.cssSelector) 101 | .find(selector); 102 | var $content = $this 103 | .find(':not(' + selector + ')'); 104 | 105 | // var loadedImgs = 0; 106 | // Make sure all the elements are loaded before we start packing 107 | // if ($assets.length > 0) { 108 | // $assets.each(function(i) { 109 | // console.log('loading'); 110 | // var $asset = $(this).bind('load', function() { 111 | // animateIn($asset); 112 | // loadedImgs++; 113 | // console.log(loadedImgs, $assets.length); 114 | // if (loadedImgs >= $assets.length) { 115 | // pack($this, calculateOffset, params, options); 116 | // } 117 | // }); 118 | // }); 119 | // } else { 120 | // console.log('no need to load'); 121 | pack($this, calculateOffset, params, options); 122 | // } 123 | 124 | // This measures the distance between the current child element and the 125 | // element `relative`ly above it. Then animates to the pack. 126 | function calculateOffset($content, origin, prevMinIndex, prevMaxIndex, i) { 127 | 128 | if (i >= $content.length) { 129 | options.complete.apply(this); 130 | removeLoader(options); 131 | return; 132 | } else if (resizing && options.fluid) { 133 | removeLoader(options); 134 | return; 135 | } 136 | 137 | var $this = $($content[i]); 138 | var $prev = $($content[i - 1]); 139 | 140 | var owt = $this.outerWidth(true); 141 | var oht = $this.outerHeight(true); 142 | var owf = $this.outerWidth(); 143 | var ohf = $this.outerHeight(); 144 | 145 | var outerWidth = Math.max(owt, owf); 146 | var outerHeight = Math.max(oht, ohf); 147 | 148 | var hMargin = owt - owf; 149 | var vMargin = oht - ohf; 150 | 151 | var x1 = $this.offset().left - hMargin, x2 = x1 + outerWidth, 152 | y1 = $this.offset().top - vMargin, y2 = y1 + outerHeight; 153 | 154 | if ($prev.length > 0) { 155 | if (x1 < $prev.offset().left && i > 0 && i !== params.i) { 156 | row++; 157 | params.row = row; 158 | params.prevMinIndex = prevMinIndex = prevMaxIndex; 159 | params.prevMaxIndex = prevMaxIndex = i - 1; 160 | params.i = i; 161 | } 162 | } 163 | 164 | var offsetY = 0; 165 | 166 | if (row > 0) { 167 | 168 | for (var j = prevMaxIndex; j >= prevMinIndex; j--) { 169 | 170 | var $prev = $($content[j]); 171 | 172 | outerWidth = $prev.outerWidth(true); 173 | outerHeight = $prev.outerHeight(true); 174 | 175 | hMargin = outerWidth - $prev.outerWidth(); 176 | vMargin = outerHeight - $prev.outerHeight(); 177 | 178 | var a1 = $prev.offset().left - hMargin, a2 = a1 + outerWidth, 179 | b1 = $prev.offset().top - vMargin, b2 = b1 + outerHeight; 180 | 181 | if (a1 >= x2 || a2 <= x1) { 182 | continue; 183 | } else if (offsetY < b2) { 184 | offsetY = b2; 185 | } 186 | 187 | } 188 | 189 | offsetY = offsetY - y1; 190 | 191 | } else { 192 | offsetY = - parseInt($this.css('margin-top').toString().replace('px', '')); 193 | } 194 | 195 | animateIn($this, { 196 | opacity: 1, 197 | marginTop: offsetY 198 | }, function() { 199 | calculateOffset($content, origin, prevMinIndex, prevMaxIndex, i + 1); 200 | }); 201 | 202 | } 203 | 204 | }); 205 | 206 | // Appends a custom loader to the body and places at the top left corner of 207 | // the element invoking the plugin. 208 | function appendLoader($dom) { 209 | 210 | var origin = { 211 | x: $dom.offset().left + ($dom.outerWidth() - $dom.width()) / 2, 212 | y: $dom.offset().top + ($dom.outerHeight() - $dom.height()) / 2 213 | }; 214 | 215 | var $loader = $('#stalactite-loader'); 216 | if ($loader.length <= 0) { 217 | $loader = $('

'); 218 | } 219 | $loader 220 | .css({ 221 | position: 'absolute', 222 | top: origin.y, 223 | left: origin.x 224 | }) 225 | .html(options.loader) 226 | .appendTo('body'); 227 | 228 | $loader 229 | .find('img') 230 | .bind('load', function() { 231 | $loader.fadeIn(); 232 | }); 233 | 234 | } 235 | 236 | function animateIn($dom, params, callback) { 237 | var args = $.extend({}, params, options.styles); 238 | if (args.opacity == $dom.css('opacity')) { // Weird bug. 239 | delete args.opacity; 240 | } 241 | $dom.css('z-index', 'auto').stop().animate(args, 242 | options.duration, options.easing, callback); 243 | } 244 | 245 | }; 246 | 247 | function index($dom) { 248 | var dom = $dom[0]; 249 | for (var i = 0; i < indexed.length; i++) { 250 | var d = indexed[i].dom; 251 | if (dom === d) { 252 | return i; 253 | } 254 | } 255 | return -1; 256 | } 257 | 258 | function removeLoader(options) { 259 | $((options.cssPrefix + '-loader')).fadeOut(); 260 | } 261 | 262 | // Before all assets are loaded, lets make sure that all children elements 263 | // within stalactite have the same structural css styling. 264 | function prep($dom, options) { 265 | 266 | var result = $dom 267 | .children() 268 | .not(options.cssSelector); 269 | 270 | if (options.cssPrep) { 271 | result 272 | .css({ 273 | position: 'relative', 274 | display: 'inline-block', 275 | verticalAlign: 'top', 276 | opacity: 0, 277 | zIndex: -1 278 | }); 279 | } 280 | 281 | return result; 282 | 283 | } 284 | 285 | // As we go through and pack each element, let's make sure that they're marked 286 | // so as not to have to repeat packing logic. 287 | function pack($dom, callback, params, options) { 288 | 289 | var $content = $dom.children().addClass(options.cssSelector); 290 | 291 | var vMargin = ($dom.outerHeight(true) - $dom.outerHeight()) / 2; 292 | var hMargin = ($dom.outerWidth(true) - $dom.outerWidth()) / 2; 293 | 294 | var origin = { 295 | x: $dom.offset().left - hMargin, 296 | y: $dom.offset().top - vMargin 297 | }; 298 | 299 | callback.call(this, $content, origin, params.prevMinIndex, params.prevMaxIndex, params.i); 300 | 301 | } 302 | 303 | $.fn.stalactite.defaultOptions = { 304 | duration: 150, 305 | easing: 'swing', 306 | cssPrefix: '.stalactite', 307 | cssPrep: true, 308 | fluid: true, 309 | loader: '', 310 | styles: {}, 311 | complete: function(value) { return value; } 312 | }; 313 | 314 | })(jQuery); 315 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | stalactite : A jQuery plugin 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 78 | 79 | 80 | 81 |

82 |

stalactite

83 |

84 | 85 |

86 |

87 | A jquery plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, stalactite takes a lazy approach and sorts each child element sequentially. This can add a sense of curation as it makes your viewer aware of the browser's decisions. 88 |

89 |

90 | 91 |

92 |
93 | Download the minified version (4kb) 94 | 95 |

96 |

97 |

98 |

99 |

100 |

101 |

102 |

103 | It sorts all types of content and is especially diligent about `images`, `videos`, and `iframes` making sure to load all media before assessing proper widths and heights. 104 |

105 | 106 |

107 |

108 |

109 |

110 |

111 |

112 |

113 |

114 | It does this by setting all children of an element to `display: inline-block;` As a result this plugin requires a modern browser and plays well with Ben Barnett's Animate Enhanced. Scroll to the bottom to see usage. 115 |

116 |

117 |

118 |

119 |

120 |

121 |

122 |

123 |

124 |

125 |

126 | 127 |

128 |

129 |

Usage

130 |

131 |


132 |           $("#container").stalactite({

133 |             duration: 350,                        // Duration of animation.

134 |             easing: 'swing',                      // Easing method.

135 |             cssPrefix: '.stalactite',             // The css naming convention.

136 |             cssPrep: true,                        // Should stalactite structurally modify css of children?

137 |             fluid: true,                          // Should stalactite recalculate on window resize?

138 |             loader: '<img />',                    // The contents of the loader. Defaults to a dataURL animated gif.

139 |             styles: {}                            // A style object to place on the child elements

140 |             complete: function(v) { return v; }  // Callback function

141 |           });


142 |           // or $("#container").stalactite(); — these are all optional params.
143 |

144 |

145 |

146 | 147 |

148 | Examples (click to see example): 149 |

Fluid Example

150 |

Custom CSS

151 |

152 |

153 | 154 | 171 | 172 | 189 | 190 |

191 | By jonobr1 — only for jQuery. Images from Gimmebar. 192 |

193 | 194 | --------------------------------------------------------------------------------