Stalactite - Packs child elements together

Stalactite is 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.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: jonobr1.github.io

1. INCLUDE JS FILES

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="j/jquery.stalactite.js"></script>

2. HTML

<div id="css-example" class="container_9 section content" style="display: none; text-align: center;">
    <img src="http://s3.amazonaws.com/resized-images-new/40E473CE-9C84-4D7A-A1A5-31B2D8A2A35C" />
    <img src="http://s3.amazonaws.com/resized-images-new/B60650DF-65F1-4D13-9286-408387FD137B" />
    <img src="http://s3.amazonaws.com/resized-images-new/9DDEC32A-1823-4F6B-B8AC-956C7443C9E8" />
    <img src="http://s3.amazonaws.com/resized-images-new/1262D972-148C-41E8-AD2A-AB4C1AD2D222" />
    <img src="http://s3.amazonaws.com/resized-images-new/78A88D94-1004-4138-8824-2BF7F1C39A6D" />
    <img src="http://s3.amazonaws.com/resized-images-new/E8DF490E-9546-482B-9B0B-4F831E6058A5" />
    <img src="http://s3.amazonaws.com/resized-images-new/B7D4B10B-8425-4405-A7AE-446357B90E07" />
    <img src="http://s3.amazonaws.com/resized-images-new/92E053FE-133A-43DB-9FBA-D4C95F2FC33A" />
    <img src="http://s3.amazonaws.com/resized-images-new/BF12BE28-2A48-43BE-A5B9-AE54F08D11F8" />
    <img src="http://s3.amazonaws.com/resized-images-new/F7606CF0-C758-4054-A691-9240192EFB6A" />
    <img src="http://s3.amazonaws.com/resized-images-new/5CD7C91C-CB3D-43BB-83B2-1B79422AF771" />
    <img src="http://s3.amazonaws.com/resized-images-new/9541AEC1-C0C0-4B76-A535-41E1290C1A6C" />
    <img src="http://s3.amazonaws.com/resized-images-new/170C9FEB-7376-412B-BCD3-017485160F0F" />
    <img src="http://s3.amazonaws.com/resized-images-new/3C74773F-4AFA-4893-967B-7362102798E1" />
    <img src="http://s3.amazonaws.com/resized-images-new/017C75E8-F1E4-4301-93A2-4DE09F26B4CF" />
</div>

3. JAVASCRIPT

$('#css-example').stalactite({
	fluid: false,
	cssPrep: false
});

4. OPTIONS

$("#container").stalactite({
	duration: 350,                        // Duration of animation.
	easing: 'swing',                      // Easing method.
	cssPrefix: '.stalactite',             // The css naming convention.
	cssPrep: true,                        // Should stalactite structurally modify css of children?
	fluid: true,                          // Should stalactite recalculate on window resize?
	loader: '<img />',                    // The contents of the loader. Defaults to a dataURL animated gif.
	styles: {}                            // A style object to place on the child elements
	complete: function(v) { return v; }  // Callback function
});