网格生成与用css/js/php划分
我正在开发一个网络项目，我正在考虑如何最好地处理以下场景：
我在数据库中有一堆图像，我想将其加载到网格中。高排名的图像需要有更大的画布，而低排名/无排名的图像则不需要。图像的尺寸不是标准的，因此它可以是尺寸不同的肖像或风景图片。长宽比需要保持不变，并且窗口需要在水平方向上完全填充（宽度为 100%）。用户可以垂直滚动。
为了让您了解网格中字段的划分，我附上了一个快速线框图。
您知道吗？大家知道如何最好地实现这一点吗？我在想也许我应该“标准化”几行。并将行随机放置，使其看起来不像预先设置的。但这显然是没有真正计算过的。任何想法表示赞赏！
I am working on a web project, and I am thinking on how to best approach the following scenario:
I have a bunch of images in a database and I want to load this in a grid. High ranked images need to have a bigger canvas, while lower/not ranked ones don't. The size of the images are not standard so it could be either a portrait or a landscape picture with each different sizes. The aspect ratio needs to remain intact, and the window needs to be totally filled horizontally (with a width of 100%). Users can scroll vertically.
To give you an idea of the division of the fields in the grid, I have attached a quick wireframe.
Do you guys have an idea on how to approach this best? I was thinking maybe I should "standardize" a few rows. And place the rows randomly so that it does not look pre-set. But this is obviously not really calculated. Any thoughts are appreciated!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
最终使用了 Masonry
http://masonry.desandro.com/
我通过划分窗口来设置每个单独列的宽度。宽度增加 5。
Ended up using Masonry
http://masonry.desandro.com/
I set the width of each individual column, by dividing the window.width by 5.
如果此网格适合您 http://css-tricks.com/13372 -seamless-responsive-photo-grid/ 您可以寻找一维装箱算法。该算法将屏幕平铺为相同宽度的垂直区域。然后它会在您的收藏中查找最适合、最适合、下一个适合或最差适合。您可以按随机顺序、降序或升序组合每种方法。这是一个很难解决的问题，也许您想尝试暴力解决方案？
If this grid is working for you http://css-tricks.com/13372-seamless-responsive-photo-grid/ you can look for a 1d bin-packing algorithm. This algorithm tiles the screen into vertical bins of the same width. Then it looks into your collection for the first-fit, the best-fit, next-fit or the worst-fit. You can combine each method with a random order, a decreasing order, or an increasing order. This is a very hard problem to solve, maybe you want to try a brute-force solution?