raphaelsaunier · July 25, 2014 09:09
diff --git a/jsbin.xotoh.css b/jsbin.xotoh.css
    body {background: #ccc;}
    * {box-sizing:border-box;}
    #container {width:300px;background:#eee;margin:0 auto}
    .item {height:150px; width: 100px; background: white; 
      border:1px solid #ddd;line-height:50px;text-align:center;font-family:sans-serif;color:#ccc; font-size:20px;color:black;}
 .item:after {color:gray;font-size:10px;}
    .item.one-by-one:after {content:"1x1"}
    .item.one-by-two {width:200px;}
    .item.one-by-two:after {content:"1x2"}
    .item.two-by-two {width:200px;height:300px;line-height:200px;}
    .item.two-by-two:after {content:"2x2"}
    .item.one-by-three {width:300px;}
    .item.one-by-three:after {content:"1x3"}
    #container {
      	counter-reset: item-counter;
    }
    .item:before {
      	content: counter(item-counter) ". ";
        color:#999;
 	    counter-increment: item-counter;
    }
diff --git a/jsbin.xotoh.html b/jsbin.xotoh.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js"></script>
 </head>
 <body>
  <div id="container">
    
    <!--

      Cards are automatically positioned by Isotope (http://isotope.metafizzy.co/)
      to minimise the occurence of gaps in the layout, the sorting order can 
      be defined using an optional data-priority attribute.
    -->
    
    <div data-priority="90" class="item one-by-three"></div>
    
    <div data-priority="89"  class="item one-by-two"></div>
    <div data-priority="88"  class="item one-by-one"></div>
    
    <div data-priority="79"  class="item one-by-one"></div>   
    <div data-priority="78"  class="item one-by-two"></div>
    
    <div data-priority="69"  class="item one-by-one"></div>
    <div data-priority="68"  class="item one-by-one"></div>
    <div data-priority="67"  class="item one-by-one"></div>
    
    
    <div data-priority="59"  class="item one-by-two"></div>
    <div data-priority="58"  class="item one-by-one"></div>
    
    <div data-priority="49"  class="item one-by-one"></div>
    <div data-priority="48"  class="item two-by-two"></div>   
    <div data-priority="47"  class="item one-by-one"></div>
    
    <div class="item one-by-one"></div>
    <div class="item one-by-one"></div>
    <div class="item one-by-one"></div>
    <div class="item one-by-one"></div>
    <div class="item one-by-one"></div>

  </div>

 </body>
 </html>
diff --git a/jsbin.xotoh.js b/jsbin.xotoh.js
    $(function(){
      var $container = $('#container').isotope({
        itemSelector: '.item',
        masonry: { columnWidth : 100 },
        getSortData: {
          priority: '[data-priority]'
        },
        sortBy : 'priority',
        sortAscending: false
      });
    });
	body {background: #ccc;}
	* {box-sizing:border-box;}
	#container {width:300px;background:#eee;margin:0 auto}
	.item {height:150px; width: 100px; background: white;
	border:1px solid #ddd;line-height:50px;text-align:center;font-family:sans-serif;color:#ccc; font-size:20px;color:black;}
	.item:after {color:gray;font-size:10px;}
	.item.one-by-one:after {content:"1x1"}
	.item.one-by-two {width:200px;}
	.item.one-by-two:after {content:"1x2"}
	.item.two-by-two {width:200px;height:300px;line-height:200px;}
	.item.two-by-two:after {content:"2x2"}
	.item.one-by-three {width:300px;}
	.item.one-by-three:after {content:"1x3"}
	#container {
	counter-reset: item-counter;
	}
	.item:before {
	content: counter(item-counter) ". ";
	color:#999;
	counter-increment: item-counter;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js"></script>
	</head>
	<body>
	<div id="container">

	<!--

	Cards are automatically positioned by Isotope (http://isotope.metafizzy.co/)
	to minimise the occurence of gaps in the layout, the sorting order can
	be defined using an optional data-priority attribute.
	-->

	<div data-priority="90" class="item one-by-three"></div>

	<div data-priority="89" class="item one-by-two"></div>
	<div data-priority="88" class="item one-by-one"></div>

	<div data-priority="79" class="item one-by-one"></div>
	<div data-priority="78" class="item one-by-two"></div>

	<div data-priority="69" class="item one-by-one"></div>
	<div data-priority="68" class="item one-by-one"></div>
	<div data-priority="67" class="item one-by-one"></div>


	<div data-priority="59" class="item one-by-two"></div>
	<div data-priority="58" class="item one-by-one"></div>

	<div data-priority="49" class="item one-by-one"></div>
	<div data-priority="48" class="item two-by-two"></div>
	<div data-priority="47" class="item one-by-one"></div>

	<div class="item one-by-one"></div>
	<div class="item one-by-one"></div>
	<div class="item one-by-one"></div>
	<div class="item one-by-one"></div>
	<div class="item one-by-one"></div>

	</div>

	</body>
	</html>
	$(function(){
	var $container = $('#container').isotope({
	itemSelector: '.item',
	masonry: { columnWidth : 100 },
	getSortData: {
	priority: '[data-priority]'
	},
	sortBy : 'priority',
	sortAscending: false
	});
	});