Mock picture grid
I changed my mind about this complex and I'm sure there is a simple answer or some other way I can find a solution.
What I am trying to accomplish is a random grid of images. I have an array of images that I want to line up in a flash grid. What I mean is that I want the grid to have no spaces. Here are some sample images:
Main characteristics:
- The container / cell must be in a ratio that the image can fit without skewing
- The grid must be hidden. It cannot have spaces, including the last line.
The problem I am facing is that I cannot come up with a formula that can create the maxtrix table I am trying to execute. Masonary is 99.9% what I'm looking for, except the grid doesn't account for image size and doesn't end up. So 1% is why I am not considering using it.
I am not looking for javascript as it is related to math, so I am planning to create a layout in PHP and then include functions in javascript.
Any help or pointers would be appreciated.
source to share
The images of your example are displayed in rows. Also, you didn't know anything about a fixed total size, so I'm guessing the aspect ratio of the entire layout can be chosen as desired. In this case, you can try something along these lines:
- Align all images on one line by setting the height and choosing the width so that the aspect ratio is preserved.
- Split this single line across multiple lines. Here you can play with several heuristics to customize the end result to your preference. But any solution meets the requirements that you specified.
- Scale each line so that they all have the same width and then stack them.
Obviously, this is just a rough outline. The very tricky part will be how to distribute the images to different lines. One goal may be to combine images with similar aspect ratios so that the final images are the same size. You can calculate, for each ratio, the preferred height of the image, which will result in the desired area of the image, and then combine images with the same height requirements until the width resulting from scaling to the total height matches the width you want for yours. last lines. But other aspects will also play a role, for example. making lines the same width, etc.
You can find suggestions for goals in other answers and comments and play with them until you find one that you like.
source to share
