index.html

<style>
	*, *:after, *:before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	body{
		padding:0px;
		margin:0;
		font-family: "Arial", "Helvetica", sans-serif;
		line-height: 20px;
		font-size: 16px;
		position: relative;
		background: rgb(240,242,244);
	}
	a{
		color: black;
	}
	a:hover{
		color: #ff3355;
	}
	h1,h2,h3,h4,h5,h6{
		padding:0px 0 0 0px;
		margin:20px 0 0 0;
		line-height: 1.2;
	}
	h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child{
		margin-top: 0;
	}
	h1 > small{
		font-weight: normal;
	}
	p{
		padding:0px 0 0 0;
		margin: 10px 0 0 0;
	}
	ul, ol{
		padding:0px 0 0 20px;
		margin:0;
	}
	ul > li, ol > li{
		margin:10px 0 0 0;
		padding:0px 0 0 0;
	}
	aside{
		color: white;
		width: 225px;
		position: fixed;
		background-color: rgb(25,30,35);
		background-image: linear-gradient(rgb(25,30,35), rgb(75,80,85));
		height: 100%;
		padding: 20px;
		font-size: 14px;
		box-shadow: inset -10px 0 10px -10px black;
	}
	footer{
		z-index: 2;
		position: absolute;
		bottom: 20px;
		left: 0;
		height: 40px;
		line-height: 40px;
		display: block;
		color: black;
		width: 100%;
		text-align: center;
	}
	aside h1{
		/*padding:20px 20px 0;*/
		font-size: 24px;
	}
	aside ul{
		list-style:none;
		padding:0;
		margin: 10px 0 0 0;
	}
	aside li{
		padding:0;
		margin:0;
	}
	aside > ul > li{
		margin:0 0 0px;
	}
	aside ul > li > ul{
		margin:0 0 0 15px;
	}
	aside a{
		color: white;
	}
	aside > ul > li > ul > li {
	}
	aside > ul > li > a:before{
		content:'⇨ ';
		opacity: .4;
		display: inline-block;
		margin-right: 7px;
	}
	aside > ul > li > a.external:before{
		content:'↩ ';
	}
	aside > ul > li li a:before{
		content:none;
		opacity: 1;
		display: inline-block;
		margin-right: 7px;
	}
	aside a:hover:before{
		opacity: 1;
	}
	aside.closed{
		left: -225px;
	}
	.cases{
		margin:0px 0 0 225px;	
	}
	aside.closed + .cases{
		margin-left: 0px;
	}
	.case{
		/*border-radius: 12px;*/
		padding: 20px 20px;
		margin:0;
		overflow: hidden;
		position: relative;
		border-top:3px dashed black;
		background-color:rgba(240,242,244,1); 
		background-image:linear-gradient(to top, rgba(240,242,244,1), rgba(210,214,218,1)); 
	}
	aside .close{
		position: absolute;
		top: 50%;
		left: 10px;
		margin-right: 0px;
		margin-top: -10px;
		font-size: 30px;
		width: 30px;
		height: 30px;
		line-height: 25px;
		text-align: center;
		opacity: .15;
		font-weight: normal;
		transition: .15s linear opacity;
		cursor: pointer;
		text-shadow: 1px 3px 0px rgba(0,0,0,.2);
	}
	aside .close:hover{
		opacity: 1;
	}

	.show-aside{
		position: fixed;
		top: 50%;
		left: 0%;
		color: white;
		font-size: 30px;
		background: #333;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		width: 30px;
		margin-top: -15px;
		height: 40px;
		line-height: 35px;
		text-align: center;
		opacity: .15;
		font-weight: normal;
		transition: .15s linear opacity;
		cursor: pointer;
		text-shadow: 1px 3px 0px rgba(0,0,0,1);
		z-index: 3;
	}
	.show-aside:hover{
		opacity: 1;
	}


	code{
		border-radius: 2px;
		margin:10px 0 0 0;
		font-size: 13px;
		border-radius: 10px;
		border:2px dashed #d3d3d3;
		padding: 0 5px;
		color: #ff3355;
	}
	code.block{
		padding: 10px 10px 10px;
		margin: 10px 0 0px 0;
		display: block;
		border:2px dashed #d3d3d3;
		overflow: hidden;
		/*white-space: pre-wrap;*/
		/*word-break: break-all;*/
		white-space: nowrap;
		position: relative;
	}
	textarea{
		margin:10px 0 0 0;
		display: block;
		position: relative;
		width: 100%;
		max-width: 100%;
		tab-size: 3;
	}
	button{
		margin:10px 0 0;
	}
	code.block:before{
		content:'';
		position: absolute;
		width: 30px;
		height: 100%;
		right: 0;
		top: 0;
		background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
	}
	code:hover{
		border-color: #333;
	}
	.count{
		color: white;
		background: black;
		font-weight: bolder;
		display: inline-block;
		width: 25px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		border-radius: 50%;
		position: relative;
		margin-right: 10px;
		font-size: 16px;
	}
	.count:after{
		content:'.';
		position: absolute;
		color: black;
		right: -7px;
		font-size: 20px;
	}
	.waterfall{
	}
	.waterfall > div {
		background: white;
		margin:0 7px 7px 0;
		padding: 15px;
		box-shadow: 0 1px 5px -1px rgba(170, 180, 190, 1); 
		border-radius: 10px;
		/*outline: 1px solid rgba(255,100,130,.2);*/
	}
	.waterfall > div:hover{
		/*outline: 1px solid rgba(255,100,130,1);*/
	}
	.content-column{
		border: 3px solid rgba(0,10,20,.2);
		/*box-shadow: inset 0 2px 5px rgba(0,10,20,.5), 0 1px 1px white;*/
		border-radius: 12px;
		background: rgba(0,10,20,.1);
		padding: 30px 5px 30px;
		position: relative;
		-webkit-transition: .15s linear;
		transition: .15s linear;
	}
	.content-column:after{
		-webkit-transition: .15s linear;
		transition: .15s linear;
		position: absolute;
		content: ".content-column";
		bottom: 0;
		left:0;
		width: 100%;
		height: 30px;
		line-height: 30px;
		font-size: 18px;
		text-align: center;
		opacity: .3;
	}
	.content-column:before{
		-webkit-transition: .15s linear;
		transition: .15s linear;
		opacity: .3;
		position: absolute;
		content: ".content-column";
		top: 0;
		left:0;
		width: 100%;
		height: 30px;
		line-height: 30px;
		font-size: 18px;
		text-align: center;
	}
	.content-column:hover{
		border: 3px solid black;
	}
	.content-column:hover:before, .content-column:hover:after{
		opacity: 1;
	}
	.column{
		width:33.3%;
		float: left;
	}
	.waterfall > .content-column > div{
		margin-right: 0;
	}
	.special{
		border: 3px solid black;
	}
	.info{
		font-size: 13px;
		color: #ff3355;
	}
	.warn{
		font-size: 13px;
		color: #eebb55;
	}
	dl{
		margin:0;
		padding:0px 0;
	}
	dt{
		margin:15px 0 0;
		font-weight: bold;
		font-size: 16px;
		font-family: monospace;
		color: #ff3355;
	}
	dt small{
		color: #9f9f9f;
		font-size: .9em;
		font-weight: normal;
	}
	dt:after{
		/*content:' − ';
		color: black;*/
	}
	dd{
		margin:0;
		padding:0 0 0 30px;
	}
</style>





<div class="show-aside" hidden>»</div>

<aside class="">
	<h1>Jquery.waterfall demo: <small>copy-paste friendly examples</small></h1>
	<ul>
		<li><a href="#start-case">Start</a></li>
		<li><a href="#options-case">Options</a></li>
		<li><a href="#items-case">Items position</a></li>
		<li><a href="#api">API</a></li>
		<li><a href="https://github.com/kudago/waterfall" class="external">Github</a></li>
		<li><a href="test/order.html" class="external">Speed test</a></li>
	</ul>

	<div class="close">«</div>

	<footer>
		© Ivanov Dmitry (<a href="https://github.com/dy">dy</a>)
	</footer>
</aside>


<div class="cases">
<div id="start-case" class="case waterfall" data-hello="1">
	<div class="special">
		<h2><a href="#start-case">Start waterfall</a></h2>
		<p>To run waterfall with default options ☞</p>
	</div>
	<div class="special">
		<header><span class="count">1</span> Include <em>jquery/zepto</em> and <em>jquery.waterfall</em></header>
		<textarea rows="5">
&lt;script src=&quot;js/zepto.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.waterfall.js&quot;&gt;&lt;/script&gt;
		</textarea>
	</div>
	<div class="special">
		<header><span class="count">2</span> Append class <code>waterfall</code> to a container with items:</header>
		<textarea rows="8">
<div class="waterfall"> 
	<div>Item 1</div> 
	<div>Item 2</div> 
	… 
	<div>Item N</div> 
</div>
		</textarea>
		<p><em>That’s it.</em> Every element which has the class <code>waterfall</code> will become a waterfall layout. Methods observing changing DOM are hooked up, you can safely add or remove items right to the container.</p>		
	</div>
	<div class="special" data-float="4">
		<header><span class="count">2a</span> Alternately, you can init any container when document is ready. In this case you don’t have to append class <code>waterfall</code>:</header>
		<textarea rows="5">
$(function(){
	$(&quot;.some-container&quot;).waterfall();
})
		</textarea>
	</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
</div>



<div id="options-case" class="case waterfall" data-col-min-width="400" data-col-class="content-column">
	<div class="special">
		<h2><a href="#options-case">Options</a></h2>
		<p>Options could be set up as data-attributes, predefined as <code>window.waterfall</code> object or passed right to the constructor ☞</p>
		<h3>Possible options</h3>
		<dl>
			<dt>colMinWidth: <small>300px</small></dt>
			<dd>Minimal column width in pixels that’s used as a basis for calculating number of columns. Only pixel values accepted for now. If value is undefined — it firstly tries to parse css <code>min-width</code>, and if it fails will fall down to default 240px.</dd>
			<dt>defaultContainerWidth: <small>$(window).width()</small></dt>
			<dd>If container is hidden, it’s preferrable to pass default width to count on.</dd>
			<dt>autoresize: <small>true</small></dt>
			<dd>Bind reflow on window resize</dd>
			<dt>defaultClass: <small>'waterfall'</small></dt>
			<dd>Class of container which to init as waterfall by default</dd>
		</dl><br/>
		<p>There’re other less important options, look to the <a href="https://github.com/dfcreative/jquery.waterfall/blob/master/jquery.waterfall.js#L20">source</a>.</p>
	</div>
	<div class="special">
		<h3><span class="count">α</span>Passing options as data-attributes</h3>
		<p>translating camel-case to dashed-case:</p>
		<textarea rows="8">
<div class="waterfall" 
	data-col-min-width="400"
	data-default-container-width="800"
	data-autoresize="true"> 
… 
</div>
</textarea>
	</div>
	<div class="special">
		<h3><span class="count">β</span>Passing options to the constructor</h3>
		<textarea rows="8">
$('.some-container').waterfall({ 
	colMinWidth: 400, 
	defaultContainerWidth: 800,
	autoresize: true
})
</textarea>
	</div>
</div>



<div id="items-case" class="case waterfall" data-col-min-width="220">
	<div class="special">
		<h2><a href="#items-case">Item position</a></h2>
		<p>You can rigidly set position of specific item through it’s data-attributes.
		</p>
		<dl>
			<dt>data-column</dt>
			<dd>Specifies what column to place item in. Accepted values: 1..n — points out exact column; <code>'left'</code>, <code>'right'</code>, <code>'first'</code>, <code>'last'</code> — points out the boundary column.
			</dd>
			<dt>data-float</dt>
			<dd>Defines floating of item, i. e. boundary column (the same as data-column). Accepted values: <code>'left'</code>, <code>'right'</code>.</dd>
			<dt>data-span</dt>
			<dd>How much columns the element will take. The same as table-cell span attrubute. Accepted values: <code>number</code>, <code>'all'</code>.</dd>
		</dl>
	</div>	
	<div data-float="right"><h4>data-float="right"</h4></div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
	<div data-column="2"><h4>data-column="2"</h4></code></div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
	<div data-column="3"><h4>data-column="3"</h4></div>
	<div data-span="2">data-span="2"</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div data-column="last"><h4>data-column="last"</h4></div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div data-span="all"><h4>data-span="all"</h4></div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div data-column="2" data-span="2"><h4>data-column="3" data-span="2"</h4></div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div data-float="left" data-span="2"><h4>data-float="left" data-span="2"</h4></div>
	<div data-float="right" data-span="2"><h4>data-float="right" data-span="2"</h4></div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
</div>


<div id="api" class="case waterfall" data-col-min-width="400">
	<div class="special">
		<h2><a href="#api">API</a></h2>
		<p>There’s no API. Add or remove items to the container through the DOM (or jQuery), and waterfall will automatically place them.</p>
	</div>
</div>



<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/zepto.js"><\/script>')</script>

<script src="jquery.waterfall.js"></script>
<script>
	$(function(){

		//Make code blocks auto-select on click
		function selectText(text) {
			var range, selection;    
			if (document.body.createTextRange) { //ms
				range = document.body.createTextRange();
				range.moveToElementText(text);
				range.select();
			} else if (window.getSelection) { //all others
				selection = window.getSelection();        
				range = document.createRange();
				range.selectNodeContents(text);
				selection.removeAllRanges();
				selection.addRange(range);
			}
		}

		$("code.block").click(function(e){
			selectText(e.target);
		})


		//Update buttons
		$('.update-options').click(function(e){
			var $e = $(e.target),
				$optsEl = $('#' + $e.attr('for')),
				$caseEl = $e.parents('.case'),
				$info = $e.parent().find('.info');
			try {
				var	opts = JSON.parse($optsEl.val());
				$wf = $caseEl.data('waterfall');
				console.log($wf.getOptions())
				$wf.setOptions(opts);

				$info.html('');
			} catch (err){
				$info.html(err)
			}
		})


		//Close btn
		$('aside .close').click(function(){
			$('aside').addClass('closed');
			$('.show-aside').removeAttr('hidden');			
			$('.waterfall').waterfall('reflow');
		})
		$('.show-aside').click(function(){
			$('aside').removeClass('closed');
			$('.show-aside').attr('hidden', true);
			$('.waterfall').waterfall('reflow');
		})

		//API btns
		var $apiCase = $('#api');
		var c = 0;
		$('#add-btn').click(function(){
			c++;
			$apiCase.waterfall('add', '<div>Item ' + c + '</div>')
		})
		$('#add-5-btn').click(function(){
			var str = '';
			for (var i = 5; i--;){
				str += '<div>Item ' + ++c + '</div>';
			}
			$apiCase.waterfall('add', str);
		})
		$('#reflow-btn').click(function(){
			$('.waterfall').waterfall('reflow');
		})

	})
</script>