Tumblr Style Gallery - http://www.nickk.com.au/glamour.html
<script>
$(function(){
//CREATE A DIV CONTAINING FOUR COLUMNS
$("<div class='imageColumns'/>").insertAfter('#section1.textSection');
$("<div class='imageColumn imageColumn0'/>").appendTo('.imageColumns');
$("<div class='imageColumn imageColumn1'/>").appendTo('.imageColumns');
$("<div class='imageColumn imageColumn2'/>").appendTo('.imageColumns');
$("<div class='imageColumn imageColumn3'/>").appendTo('.imageColumns');
//SPLIT IMAGES INTO 4 COLUMNS
var count = 0;
$(".contentImgRow .item").each(function(){
//GET BACKGROUND IMG URL
var bg = $(this).find(".contentImg").css('background-image');
bg = bg.replace('url(','').replace(')','');
bg = bg.replace("\"", '');
bg = bg.replace("\"", '');
//CREATE IMAGE
var img = "<img src='" + bg + "'/>";
//INSERT IMAGE
$(this).find(".contentImg").html(img);
//CLEAR CSS BACKGROUND
$(this).find(".contentImg").css('background-image','');
//MOVE IMAGE TO COLUMN
$(this).appendTo(".imageColumn" + count);
//INCREMENT COUNT
count++;
if(count == 4){
count =0;
}
});
});
</script>
.imageColumn .item{
width:100%;
}
.imageColumn .contentImg {
width:100%;
height:auto!important;
padding:0!important;;
}
.imageColumn img {
width:100%;
}
.imageColumn {
width:25%;
padding:0 5px;
box-sizing:border-box;
display:inline-block;
}
.imageColumns {
width:100%;
max-width:1300px;
margin:auto;
display:flex;
}