collagePlus网格不适合容器
collagePlus网格不适合容器
提问于 2015-04-27 18:41:33
我正在尝试使用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>如果有人知道为什么会发生这种情况，以及我能做些什么来修复它，我会非常感激。
回答 3
Stack Overflow用户
发布于 2015-04-27 19:05:59
尝试对每行使用目标高度
$('.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"
}
);Stack Overflow用户
发布于 2015-04-27 19:25:58
您将需要一个不同的插件，或者自己编写它。Collage似乎没有“固定高度”功能，它只有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>
Stack Overflow用户
发布于 2016-06-19 04:21:33
尽管这是一篇一年前的文章，但也许这篇文章可以帮助一些人。
将图像设置为float:left，并将collagePlus的第80行从
var w = (typeof $img.data("width") != 'undefined') ? $img.data("width") : $img.width(),
h = (typeof $img.data("height") != 'undefined') ? $img.data("height") : $img.height();至
var w = $img.width(),h = $img.height();有时图像的宽度和高度返回0。我也在使用http://imagesloaded.desandro.com/来重置拼贴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29893451
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号