Struggling with aligning an image gallery featuring images of varying sizes? I don't want to set the size programmatically as it may not look good on different screens. The additional challenge is dealing with white spaces between images and not knowing the image sizes (obtained through a List of images using Spring Framework controller and added via a for-each cycle). Here's my code:
<%@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>
Current state of the gallery:
Any suggestions on how to make this smoother? I've tried various solutions but due to the cycling through images, nothing seems to work properly. Appreciate any help!
UPDATE:
Looking to achieve this layout: