具有不同图像尺寸的JavaScript和Bootstrap图像库
[英]JavaScript and Bootstrap image gallery with different image sizes
问题描述
I have a problem aligning image gallery with images of different size. 
我在将图库与其他大小的图像对齐时遇到问题。 I do not want to put size programmatically, because on different screens they would not look nice. 我不想以编程方式放置尺寸，因为它们在不同的屏幕上看起来不太好。 Another problem is whitespaces between images and a situation, that I do not know image sizes (images are obtained as a List of image, through Spring Framework controller and added by for-each cycle). 另一个问题是图像与情况之间的空白，我不知道图像的大小（图像通过Spring Framework控制器作为图像列表获得，并按for-each周期添加）。 My code is: 我的代码是：
<%@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>
And the gallery looks like: 画廊看起来像：
Any ideas how to make it more smooth etc.? 有什么想法如何使其更平滑等吗？ I tried different solutions, but because my images go through a cycle, they seem not to work properly. 我尝试了不同的解决方案，但是由于我的图像经历了一个周期，因此它们似乎无法正常工作。 Thank you in advance 先感谢您
UPDATE: 更新：
It should look like this: 它看起来应该像这样：
3 个解决方案
解决方案1
4 已采纳 2015-06-08 10:25:19
You should try the masonry library to arrange images of different sizes. 您应该尝试使用砌体库来排列不同大小的图像。 Here is more info this library. 这是该库的更多信息。 masonary . 砌筑的 。 Also check out this quick tutorial: http://www.epicwebs.co.uk/jquery-tutorials/quick-and-easy-jquery-masonry-tutorial/ 另请查看此快速教程： http : //www.epicwebs.co.uk/jquery-tutorials/quick-and-easy-jquery-masonry-tutorial/
解决方案2
1 2015-06-08 10:39:15
1) One way is to get get the maximum height among all li elements and then apply this height to all of them - here is a script : 1）一种方法是获取所有li元素中的最大高度，然后将此高度应用于所有li元素-这是一个脚本：
jQuery(document).ready(function($) {
// calculate max height among all elements
var maxHeight = 0;
var rowElements = $('ul.row');
rowElements.each(function() {
var elementHeight = $(this).height();
if(elementHeight > maxHeight) {
maxHeight = elementHeight;
}
});
// now apply this height to all elements
rowElements.height(maxHeight);
});
That script takes all elements from all rows and thus there could be big margins between some rows, which don't have big images, but you can tweak that script based on your needs 该脚本会吸收所有行中的所有元素，因此某些行之间可能会有很大的空白，但是这些行没有大的图像，但是您可以根据需要调整该脚本
2) Second options is to just wrap each 4 images in a separate - this is more simple solution. 2）第二种选择是将每个4张图像包装在单独的文件中-这是更简单的解决方案。 That will require a little jsp in your foreach loop. 那将需要在您的foreach循环中添加一些jsp。 I don't know jsp, so won't provide any particular code, but should be very ez. 我不知道jsp，因此不会提供任何特定的代码，但是应该非常简单。
解决方案3
0 2015-06-18 10:00:56
The masonry library, which was adviced by bbh and Paulie_D is a correct and good solution for the case, many websites use it with the cases which are very similar to mine. 由bbh和Paulie_D建议的砌体库是针对此案例的正确且良好的解决方案，许多网站都将其用于与我的案例非常相似的案例。 So, their choice is methodologically correct. 因此，他们的选择在方法上是正确的。
To achieve such grouping as shown in my question's UPDATE, (one heigth for all, different widths and different amount of columns/images in each row) I used only CSS means: 为了实现如我的问题的UPDATE所示的分组（对于所有行，一个高度，每行不同的宽度和不同的列/图像数量），我仅使用CSS表示：
.ImgClip{ max_width = 100%; heigth = auto; }
Now there is one height for all images and different widths. 现在，所有图像和不同的宽度只有一个高度。 Width can be less, then maximum 宽度可以小于最大
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.