具有不同图像大小的JavaScript和Bootstrap图库

时间:2015-06-08 10:23:38

标签: javascript html css twitter-bootstrap image-gallery

我在将图库与不同尺寸的图像对齐时遇到问题。我不想以编程方式放大小,因为在不同的屏幕上它们看起来不太好看。另一个问题是图像和情况之间的空白,我不知道图像大小(图像是作为图像列表获得的,通过Spring Framework控制器并通过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>

图库看起来像是:enter image description here

任何想法如何让它更顺利等?我尝试了不同的解决方案,但由于我的图像经历了一个循环,它们似乎无法正常工作。提前谢谢

更新

应该如下所示: enter image description here

3 个答案:

答案 0 :(得分:4)

您应该尝试使用砌体库来排列不同大小的图像。这是更多信息这个库。 masonary。另请参阅此快速教程:http://www.epicwebs.co.uk/jquery-tutorials/quick-and-easy-jquery-masonry-tutorial/

答案 1 :(得分:1)

1)一种方法是获取所有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);
});

该脚本从所有行中获取所有元素,因此某些行之间可能存在较大的边距,这些行没有大图像,但您可以根据需要调整该脚本

2)第二个选项是将每个4个图像分开包装 - 这是更简单的解决方案。这将需要你的foreach循环中的一个小jsp。我不知道jsp,所以不会提供任何特定的代码,但应该是非常ez。

答案 2 :(得分:0)

由bbh和Paulie_D提供建议的砌体库是一个正确而且很好的解决方案,很多网站都使用它与我的非常相似的案例。所以,他们的选择在方法上是正确的。

要实现我的问题更新中所示的分组(每行一个高度,不同宽度和每行中不同数量的列/图像),我只使用CSS表示:

  .ImgClip{ max_width = 100%; heigth = auto; }

现在所有图像和宽度都有一个高度。宽度可以小于最大值