JSFiddle - React, Tailwind, and code Playground

by ebiewener

HTML

<div id="gal">
    <img src="http://dummyimage.com/180x120/000/fff" alt="Image 1" title="Some image title"/>
    <img src="http://dummyimage.com/175x104/f0f/fff" alt="Image 2" title="Some image title"/>
    <img src="http://dummyimage.com/150x100/a3d/fff" alt="Image 3" title="Some image title"/>
    <img src="http://dummyimage.com/278x125/cf5/fff" alt="Image 4" title="Some image title"/>
    <img src="http://dummyimage.com/199x120/e46/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/207x480/361/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/400x107/081/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/50x40/cc3/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/700x500/233/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/300x120/a26/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/341x177/f10/fff" alt="Image." title="Some image title"/>
    <img src="http://dummyimage.com/164x239/d34/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/200x300/34e/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/175x120/72a/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/210x110/112/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/278x225/644/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/300x120/dc3/fff" alt="Image." title="Some image title"/>
    <img src="http://dummyimage.com/90x104/b30/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/120x60/bb3/fff" alt="Image" title="Some image title"/>
    <img src="http://dummyimage.com/140x125/aa3/fff" alt="Image" title="Some image title"/>
</div>

CSS

#gal{
    padding:30px;
}
#gal img{
    float:left;
    height:100px;
    margin:5px;
    padding:0px;
}

.wrapper{
background:#f00;
    margin:1px;
}

JavaScript

// ( how to get the number of images in the 'Nth line???' )
// how to group each line by wrapping images into some DIV ?

var gal = $('#gal');

gal.children('img').each(function(){
    var el = $(this);
    el[0].Pos = el.position().top;
})
.each(function(){
    var el = $(this);
    var rowWrapper = gal.children('.group' + el[0].Pos);
    if(rowWrapper.length === 0){
        el.wrap('<div class="wrapper group' + el[0].Pos + '"></div>');
    }else{
        el.appendTo(rowWrapper);
    }
});