网格生成与用 css/js/php 划分

问题描述

我正在做一个网络项目，我正在考虑如何最好地处理以下场景:

I am working on a web project, and I am thinking on how to best approach the following scenario:

我在数据库中有一堆图像，我想将其加载到网格中.排名靠前的图片需要更大的画布，而排名较低/未排名的则不需要.图像的尺寸不是标准的，因此它可以是具有不同尺寸的纵向或横向图片.纵横比需要保持不变，并且窗口需要完全水平填充(宽度为 100%).用户可以垂直滚动.

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!

推荐答案

最终使用 Masonryhttp://masonry.desandro.com/

Ended up using Masonry http://masonry.desandro.com/

我通过将 window.width 除以 5 来设置每一列的宽度.

I set the width of each individual column, by dividing the window.width by 5.

这篇关于网格生成与用 css/js/php 划分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！