Я пытаюсь выяснить алгоритм:
1) получить ширину контейнера, содержащего блоки (контейнер должен быть относительным, чтобы он расширялся при изменении размера окна). Чтобы получить ширину, используйте .width или .outerWidth
2) разделить ширину контейнера на ширину блока, пол его. Теперь вы знаете, сколько блоков помещается в один ряд.
3) Чтобы вычислить высоту, это может быть сложно, потому что у вас может быть заголовок или навигация и т. Д., Которые сокращают вертикальное пространство вниз. Так что сделайте это:
3.1) Получить высоту окна $(window).height();
3.2) Получить верхнее смещение контейнера $('#container').offset().top
3.3) Вычтите смещение из высоты окна - теперь у вас есть «реальная» высота
(примечание: если у вас есть нижний колонтитул и т. д., вы также должны вычесть это резервное пространство)
4) Разделите реальное доступное вертикальное пространство по высоте блока (обратите внимание на поля / отступы) и напишите это число. Теперь вы знаете, сколько строк может уместиться в вашем пространстве.
5) умножить макс. строки и макс. столбцы, которые мы вычислили, это максимальное количество блоков, в которые можно поместиться.
6) Получите ваши блоки, например $('.block'), и итерируйте через них $('.block').each(function(index) { ... }); сейчас, если индекс больше максимального. количество блоков мы рассчитали, спрячьте их!
7) Присоедините обработчик событий к $(window).resize(function() { }) и выполните шаги выше для изменения размера