SR Image Ordering
by OwenMelbz
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<div class="result"></div>
CSS
.result > div:nth-child(odd){
background: silver;
}
JavaScript
Array.prototype.clean = function() {
for (var i = 0; i < this.length; i++) {
if (this[i] == null || typeof this[i] == undefined || !this[i].length) {
this.splice(i, 1);
i--;
}
}
return this;
};
Array.prototype.chunk = function(chunkSize) {
var array=this;
return [].concat.apply([],
array.map(function(elem,i) {
return i%chunkSize ? [] : [array.slice(i,i+chunkSize)];
})
);
}
Array.prototype.swap = function (x,y) {
var b = this[x];
this[x] = this[y];
this[y] = b;
return this;
}
var photos = [
{
"url": "1",
"landscape": false
},
{
"url": "2",
"landscape": false
},
{
"url": "3",
"landscape": true
},
{
"url": "4",
"landscape": true
},
{
"url": "5",
"landscape": false
},
{
"url": "6",
"landscape": true
},
{
"url": "7",
"landscape": false
},
{
"url": "8",
"landscape": false
},
{
"url": "9",
"landscape": false
},
{
"url": "10",
"landscape": false
},
{
"url": "11",
"landscape": false
},
{
"url": "12",
"landscape": true
},
{
"url": "13",
"landscape": true
},
{
"url": "14",
"landscape": false
},
{
"url": "15",
"landscape": true
}
];
(function( photos ){
var views = new Array();
var lastView = 0;
/* Pair Up Portraits and Landscapes */
_.each(photos, function(photo, i){
if (photo.landscape ||
(typeof views[lastView] != 'undefined' && views[lastView].length == 2) ){
views[++lastView] = new Array();
}
if (typeof views[lastView] == 'undefined') views[lastView] = new Array();
views[lastView].push(photo);
if (photo.landscape)...