Filling white space with floating blocks. Analysis of 2 examples of implementation. From Yandex and from the studio Lebedev.
Recently I ran into the problem of implementing floating blocks in one online store. The bottom line is that products are displayed in blocks. As planned, the number of blocks horizontally should vary depending on the screen resolution. It was not possible to use float in stupid because of not fixed height of blocks. A little googling, I did not find anything. But he remembered that he had seen similar things on Yandex and in the shop of Lebedev’s studio. Actually, I post here for familiarization with what you yourself can find in these sources. All I did was cleaned up the extra code. If I had found a similar post earlier, it would save me time.
Each of these methods has its own advantages and disadvantages. We'll see:
Yandex example and source + No block height restriction + Fills all empty space. - Uses fairly large javascript - Used tables ')
An example from Lebedev’s studio and a source (Thank you for the comments left) + No javascript + no tables - Does not fill the empty space when it is not enough for a new unit - Hard limit on block height
If you know other interesting examples - write. I will replenish the collection.