我在将图片库与不同大小的图片对齐时遇到问题。我不想以编程方式设置大小，因为在不同的屏幕上它们看起来不太好。另一个问题是图像之间的空白和我不知道图像大小的情况(图像是通过 Spring Framework Controller 作为图像列表获取的，并通过 for-each 循环添加)。我的代码是:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page session="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Who s the whale here? Im the whale</title>
<link rel='stylesheet' href='webjars/bootstrap/3.2.0/css/bootstrap.min.css'>
<style>
body {
padding-top: 20px;
}
.navbar-default {
background-color: rgba(255,255,255,0.88);;
border-color: rgba(255,255,255,0.88);;
}
</style>
<sec:csrfMetaTags/>
</head>
<body>
<script type="text/javascript" src="webjars/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="webjars/masonry/3.1.5/masonry.pkgd.min.js"></script>
<br>
<br>
<c:if test="${!empty masterpieceList}">
<div class="container">
<ul class="row">
<c:forEach items="${masterpieceList}" var="masterpiece">
<li class="col-md-3 col-sm-4 col-xs-6 wrapper">
<img class="img-responsive imgClip"src="/something/getImg${masterpiece.masterpieceId}" />
</li>
</c:forEach>
</ul>
</div>
</c:if>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
画廊看起来像:
有什么想法可以让它更流畅等吗？我尝试了不同的解决方案，但由于我的图像经历了一个循环，它们似乎无法正常工作。提前谢谢你
更新:
它应该是这样的:
最佳答案
您应该尝试使用 masonry 库来排列不同大小的图像。这是这个图书馆的更多信息。 masonary .另请查看此快速教程:http://www.epicwebs.co.uk/jquery-tutorials/quick-and-easy-jquery-masonry-tutorial/
关于具有不同图像大小的 JavaScript 和 Bootstrap 图像库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30706654/