How to Wrap Tiles in Promoted Links

By default, SharePoint 2013 does not wrap the Tiles instead it will show the links horizontally and also enables horizontal scrolls when the tiles are more than screen width. The following script will wrap the Tiles like 4 tiles per row.

Wouldn't it be nice to have the option to cause the tiles to "wrap?" An example of useful wrapping would be breaking up the 12 tiles into 3 rows; 1 row for each 4 tiles. This would create the desired aesthetically pleasing display, without going past the edge of smaller screens. With this small JavaScript, the proper wrapping of tiles is possible.

Just add a "Script Editor" web part to the page and paste the following code to the snippet. 

<style>

  .ms-promlink-body {

    width: 650px;

  }    

</style>

<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    $('#promlink_row_' + currentRow).append($('.ms-promlink-body > .ms-tileview-tile-root:eq(' + (numberOfLinksPerRow) + ')'));    

// increment the number of links in the current row

    numberOfLinksInCurrentRow++;  }

}

});

</script>

After saving your edited page it should look like this: 

With the variable "numberOfLinksPerRow" you can control the count of tiles per row.
By deafult, each promoted link seems to be 160px wide, 560 for 4 boxes in width, and 480 for 3 boxes in width.  Click edit page and Edit Source and edit this code if you want to to change 3 boxes per row accordingly.

<style>

  .ms-promlink-body {

    width: 560px;

  }    

</style>

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

var numberOfLinksPerRow = 4;