How to create a wrapped tile-view for the ‘Multiple Promoted Links’ webpart in a page

Promoted Links – Tiles view webpart is one of the easiest way to present the new Tile interface to the user.  The default view only renders the Tiles horizontally and to have wrapped tile view, we have to customise it. For our O365 project, we have customised the Tiles view using the following Javascript.

Default Tile View: With 2 Tiles webpart.

Javascript: The below JS is the modified version from the TechNet (for single Tile webpart in a page). The original version is modified to support multiple Tiles webpart in a page.

function wrapTiles() {
    // Update this value to the number of links you want to show per row
    var numberOfLinksPerRow = 6;
    // local variables
    var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
    var post = "'></div></td></tr>";
    var numberOfLinksInCurrentRow = numberOfLinksPerRow;
    var currentRow = 1
    // find the number of promoted links we're displaying
    $('.ms-promlink-body').each(function (index) {
        var numberOfPromotedLinks = $(this).find(".ms-tileview-tile-root").length;
        numberOfLinksInCurrentRow = numberOfLinksPerRow;
        // if we have more links then we want in a row, let's continue
        if (numberOfPromotedLinks > numberOfLinksPerRow) {
            // we don't need the header anymore, no cycling through links
            $('.ms-promlink-headerNav').hide();
            // let's iterate through all the links after the maximum displayed link
            for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {
                // if we're reached the maximum number of links to show per row, add a new row
                // this happens the first time, with the values set initially
                if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {
                    // i just want the 2nd row to
                    currentRow++;
                    // create a new row of links
                    $(this).closest('tbody').append(pre + currentRow + post);
                    // reset the number of links for the current row
                    numberOfLinksInCurrentRow = 0
                }
                // move the Nth (numberOfLinksPerRow + 1) div to the current table row
                $(this).closest('tbody').find('#promlink_row_' + currentRow).append($(this).find('.ms-tileview-tile-root:eq(' + (numberOfLinksPerRow) + ')'));
                // increment the number of links in the current row
                numberOfLinksInCurrentRow++;
            }
        }
    }
    );
}

Wrapped Tiles View:

The above script works on SP2013 and O365 environment. Full script: .