JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<button>Fade Out!</button>
<img src="http://media.tumblr.com/tumblr_lugcf0pvkw1qekt53.jpg" />

JavaScript

var img = $("img"),
    imgUrl = img.attr("src"),
    imgWidth = img.width(),
    imgHeight = img.height(),
    settings = {
        squaresInRow: 5,
        rows: 4       
    };

// Hide img
img.hide();

for (var i = 0, l = settings.rows; i < l; i++) {
    for (var m = 0, n = settings.squaresInRow; m < n; m++) {
        $("body")
            .append("<div class=\"square square_" + m + "_row_" + i + "\" />");

        $(".square_" + m + "_row_" + i)
            .css({
                "float": "left",
                "width": imgWidth / settings.squaresInRow,
                "height": imgHeight / settings.rows,
                "background": "url(" + imgUrl + ")",
                "background-position": "-" + m * (imgWidth / settings.squaresInRow) + "px -" + i * (imgHeight / settings.rows) + "px"             
            });                
    }
}