Question

我正在尝试使用collagePlus JQuery插件制作图像网格。这应该适合容器内div中的所有图像。但是，当我尝试插入超过4个图像时，它会超出容器的高度以适合图像，而不是缩小图像尺寸以适合容器。

代码：

<html>
    <link rel='stylesheet' href="css/collage.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.collagePlus.js"></script>
    <div style='height:200px; width:100%;max-height:200px;'>
    <div class="Collage">
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>

    </div>
    </div>
    <script>
        $('.Collage').collagePlus({'allowPartialLastRow' : true});
    </script>
</html>

如果有人知道为什么会这样，我可以做些什么来修复它，我真的很感激。

Answer 1

尝试为每行使用目标高度

$('.Collage').collagePlus(
{
    // change this to adjust the height of the rows
    'targetHeight' : 100,
    // change this to try different effects
    // valid effets = effect-1 to effect-6
    'effect' : "effect-1"
}
);

Answer 2

您将需要一个不同的插件，或自己编写代码。 Collage Plus似乎没有“固定高度”功能，它只有targetHeight属性来设置每行的高度。不幸的是，这使它像蜡笔一样充满活力。

以下是一些example code（代码段似乎无法在Google Chrome中使用）：

$('.Collage').collagePlus({'allowPartialLastRow': true, 'targetHeight': 95});

#Container {
    border:1px solid black;
    height:200px;
    width:100%;
    max-height:200px;
    overflow:hidden;
}
.Collage {
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ed-lea.github.io/jquery-collagePlus/javascripts/example/jquery.collagePlus.min.js"></script>
<div id="Container">
    <div class="Collage"><!-- Remove all whitespace between elements as suggested on collagePlus
        --><img src="http://placehold.it/350x150" alt="" /><!--
        --><img src="http://placehold.it/320x100" alt="" /><!--
        --><img src="http://placehold.it/550x400" alt="" /><!--
        --><img src="http://placehold.it/120x150" alt="" /><!--
        --><img src="http://placehold.it/120x150" alt="" /><!--
        --><img src="http://placehold.it/315x205" alt="" /><!--
        --><img src="http://placehold.it/350x150" alt="" /><!--
    --></div>
</div>

Answer 3

even though this is a year old post, maybe this can help someone.

Set your images to float:left and change line 80 of collagePlus from

var w = (typeof $img.data("width") != 'undefined') ? $img.data("width") : $img.width(), 
h = (typeof $img.data("height") != 'undefined') ? $img.data("height") : $img.height();

to

var w = $img.width(),h = $img.height();

Sometimes width and height of images were returning 0. I'm also using http://imagesloaded.desandro.com/ to reset collage.

collagePlus网格不适合容器

3 个答案: