search

brunjo / rowGrid.js

A small, lightweight JavaScript plugin for placing items in straight rows (jQuery and vanilla JS version) – Demo:
http://brunjo.github.io/rowGrid.js/
MIT License
670 stars 78 forks source link

for square items, last row looks out of alignment #7

Open yairEO opened 10 years ago

yairEO commented 10 years ago

If you have items which are all exactly the same initial width and height, and start resizing their container, then the last row doesn't match, and it looks weird. This is a no-go for my client:

gurushots_-_challenge_entries_-_2014-03-10_21 55 28

A grid item should always have the same dimensions as the rest, if they are all the same size. maybe it can be added as an option to the plugin.

brunjo commented 10 years ago

Maybe I add the option to set the height of the last row to the average height of all other rows. Would this be okay?

yairEO commented 10 years ago

I think it's much much more simple for this kind of things. it can be done with a tiny amount of code. you only need to calculate the size of one item to know if they all will fit well, not even the margin between them, it can stay fixed, just their sizes must be changed upon resize, but it's really easy to calculate, and then just apply the same calculations to all the items.

   (row_width - margin * (number_of_row_items - 1)) / number_of_row_items = item_width

If an item becomes too small, change the formula and make number_of_row_items smaller

yairEO commented 10 years ago

I wrote a test page for my idea:

http://jsbin.com/bucoceqi/2/edit