创建图像网格

Question

这里我要实现一个网页

有一个显示图像的网格。如果所有图像都具有理想的宽度和高度，那将很容易，因此我可以安排这些图像以适应网格。但是，对于各种尺寸的图像，我还没有找到解决方案。所以，任何人都有任何想法或知道一些可以的库/工具 灵活地创建像这样的图像网格？ 谢谢！

Answer 1

我认为这就是你要找的东西：http://masonry.desandro.com/。 JS库允许完全按照你想要的那样做。

Answer 2

如果您正在使用jQuery，我建议使用Masonry，如果您也使用它，它也会内置到核心wordpress中。

以下是使用它的示例。

function masonry_shiz(){
        $('#gal1').masonry({
            singleMode: true,
            "gutter": 0,
            isFitWidth: true,
            isAnimated: true
        }).imagesLoaded(function() {
            $('#gal1').masonry('reloadItems');
        });
        $(window).load(function() {
            $(".masonry-brick").each(function(i) {
                $(this).delay((i + 1) * 50).fadeIn();
            });
        });
    }masonry_shiz

Here's a link to the plugin

Answer 3

尝试使用名为Freewall的jQuery插件。它位于http://vnjs.net/www/project/freewall/

检查此演示以获取相同的插件（与您的要求相同）：

http://vnjs.net/www/project/freewall/example/image-layout.html

Answer 4

查看以下链接： stackoverflow-question jquery-plugin another-alternative 和这篇文章here。希望它有所帮助

Answer 5

如果您的设计不应该改变，您可以使用CSS框架来构建这样的页面。

一个着名的是Bootstrap，它允许您使用行和列在网格中订购<div>个标记。这也是响应式的，这意味着结果可以自动适应大屏幕以及手机和平板电脑。

您可以使用其他框架，例如elasticss，Knacss，Blueprint。