网格生成&除以css / js / php [英] Grid generation & division with css/js/php

问题描述

我正在开发一个web项目，我正在考虑如何最好地处理以下情况：

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!

推荐答案

使用Masonry结束
http://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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！