JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<div id="gallery">
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="image-wrap">
        <div class="image"></div>
    </div>
    <div class="clear"></div>
</div>

CSS

#gallery
{
    background-color: #333333;
}
.image-wrap
{
    float: left;
    margin: 4px;
    padding: 4px;
    background-color: #999999;
}
.image
{
    width: 64px;
    height: 64px;
}
.clear
{
    clear: both;
}

JavaScript

$(document).ready(function() {
    $(".image").each(function() {
        var c;
        c = Math.random() * 16777216;
        c = Math.floor(c);
        c = c.toString(16);
        c = "000000" + c;
        c = c.slice(-6);
        c = "#" + c;
        $(this).css({
            "background-color": c
        });
    });
    $(window).resize(function() {
        if (console && console.log) {
            console.log("Before: " + $("#gallery").attr("style"));
        }
        $("#gallery").removeAttr("style");
        var width_gallery = $("#gallery").width();
        var width_image = $(".image-wrap:first").outerWidth(true);
        var width_optimal = Math.floor(width_gallery / width_image) * width_image;
        $("#gallery").css({
            width: width_optimal,
            margin: "0 auto"
        });
        if (console && console.log) {
            console.log("After: " + $("#gallery").attr("style"));
        }
    }).resize();
});