Как заполнить пустоту при работе float?

Есть главный блок, в котором есть много блоков определенной ширины и высоты с float:left. Допустим, ширина блоков 250px, при уменьшении окна браузера, один из блоков "прыгает" вниз, а в верхней строке остается пустое место. Пример:

Увидел решение тут. По сути, на данном сайте в 5 больших картинок, влазит 6 маленьких ну и т.д. Пробую реализовать на JS (не получается использовать свойства min-width и max-width при float:left), но что-то пока безуспешно, может, надо как-то по-другому делать?

Пример на jsfiddle.net. Рабочий пример на SCSS: Пример. Хотелось бы CSS и JS ограничиться.