SharePoint Promoted Links - Wrap tiles

When you use the "Promoted Links" web part on one of your pages, there is the possibility that the web part uses a lot of horizontal space, because you need to display a large number of tiles; for example, 12 tiles. For an aesthetically-pleasing display of the tiles, without cumbersome scroll buttons, you would need a large 16:9 monitor.

So wouldn't it be nice to have the option to wrap up the tiles? Like breaking up the 12 tiles into 3 rows for each 4 tiles?

With this small JavaScript it is possible.
Just add a "Script Editor" web part to the page and paste the following code to the snippet.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

// Update this value to the number of links you want to show per row

var numberOfLinksPerRow = 4;

// 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

var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;

// 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-root > .ms-promlink-header').empty();

// 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

$('.ms-promlink-root > table > tbody:last'

).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

$('.ms-promlink-body > .ms-tileview-tile-root:nth-child(' + (numberOfLinksPerRow + 1) + ')').appendTo($('#promlink_row_' + currentRow));

// increment the number of links in the current row

numberOfLinksInCurrentRow++; }

}

});

</script>

Note that this script also adds a reference to the jQuery library. When you already have access to jQuery on your SharePoint site you can delete the first row.

After saving your edited page it should look like this: