javascript – 在div中排列图像的随机数并填满所有空间

2023年4月9日 198次阅读

最近我需要建立一个网站,但我有一些问题与div响应安排图像.

我有随机数量的照片,从最小1到最大7.然后我需要在div中显示这个数量的照片,并确保所有照片将填满该div中的所有空间.这有可能吗？谢谢.

《javascript – 在div中排列图像的随机数并填满所有空间》

是否有可能根据我们的设计制作图像数量？
例如当只显示1个图像时,会使其全尺寸,如果得到6个图像,则会显示6个图像模式.以下是具有图像数量的输出的所有示例.
《javascript – 在div中排列图像的随机数并填满所有空间》

最佳答案 注意：你可以使用masonry作为jquery插件[我看到你已经在你的问题中标记了jquery]或者你可以使用纯vanilla代码进行初始化.

您可以使用砌体[http://masonry.desandro.com/].

以下是图库的示例：http://desandro.github.io/masonry/demos/images.html

这是另一个例子[http://demos.creative-punch.net/masonry-gallery/].

基本上你需要做的就是在那里放一个容器和一些物品,并将砖石挂在那个容器上.

<div id="container">
    <!-- This will make sure our size stays right when using Masonry -->
    <div class="grid-sizer"></div>

    <!-- This is what Masonry will tile for you -->
    <div class="item">

        <!-- An image, of course! -->
        <img src="http://placekitten.com/650/450" class="image">

        <!-- This is the overlay for the hover -->
        <a class="overlay" href="#">
            <h3 class="title">Some title</h3>
            <div class="description">
                <p>
                    Lorem ipsum dolor sit amet, <br>
                    consectetur adipisicing elit.
                </p>
            </div>
        </a>
    </div>
    ...

钩砌砖：

    $(window).load( function() {

    $('#container').masonry({
        "itemSelector": ".item",
        "columnWidth": ".grid-sizer",
    });

});

然后风格,如果你需要更多.

参考：http://creative-punch.net/2014/01/full-screen-image-gallery-using-css-masonry/

点赞