瀑布流实例

最新推荐文章于 2024-09-19 11:59:04 发布

H华华

最新推荐文章于 2024-09-19 11:59:04 发布

阅读量568

点赞数

分类专栏： jquery springmvc 文章标签： jsp eclipse Spring

本文链接：https://blog.csdn.net/qq_20910089/article/details/50508278

版权

jquery 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

springmvc

2 篇文章 0 订阅

订阅专栏

首先做好准备工作。

导入需要的css和js到项目中。

css :main.css ,reset.css

js :jquery.imagesloaded.js ,jquery.wookmark.min.js.

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String contextPath = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()	+ contextPath + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title></title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="<%=contextPath%>/resources/css/reset.css" rel="stylesheet" media="screen"> 
<link href="<%=contextPath%>/resources/css/main.css" rel="stylesheet" media="screen"> 
<script type="text/javascript" src="<%=contextPath%>/resources/js/jquery-1.9.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=contextPath%>/resources/js/jquery.wookmark.min.js"></script>
<script type="text/javascript" src="<%=contextPath%>/resources/js/jquery.imagesloaded.js"></script>
 <!-- CSS Reset -->
<style type="text/css">
	.nomore{
		width: 20%;
		height:30px;
		margin-right:40%;
		margin-left:40%;
		margin-bottom:5%;
		background-color: #F7F7F7;
		text-align: center;
		padding: 10px,10px,10px,10px;
	}
	.nomore a{
		width:80%;
		display:block;
		color:#9999A5;
		font-weight:bold;
		font-size:14px;
		margin-top:5px;
		margin-bottom:5px;
		margin-left:10%;
		margin-right:10%;
		float:left;  
	}
	.hover{
		background-color:#F5F5FF;
	}
</style>
</head>
<body>
	<div>
		<input type="hidden" id="freequency" value="30" />
	</div>
	<div id="container">
		<div id="main" role="main">
     		 <ul id="tiles">
                               <!--此处循环的是从数据库中取得的list集合(存放图片信息的对象) --> 
                               <c:forEach items="${imagelist.datas}" var="image">
					<li>
						<img src="${image.URL}"  width="200" >
						<p><a href="imagereport/desc/${image.ID }/${image.WEB_REPORT_ID }">${image.ABSTR}</a></p>
					</li>
				</c:forEach>
			</ul>
		</div>
		<div id="nomore" align="center"></div>
	</div>
	<script type="text/javascript">
	$(function(){
		$("#nomore").hover(
			function(){
				$(this).addClass("hover");
			},
		   function(){
		  		$(this).removeClass("hover");
		   }
		);
	});
	
	
	
    (function ($){
      var $tiles = $('#tiles'),
          $handler = $('li', $tiles),
          $main = $('#main'),
          $window = $(window),
          $document = $(document),
          options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $main, // Optional, used for some extra CSS styling
            offset: 20, // Optional, the distance between grid items
            itemWidth: 210 // Optional, the width of a grid item
          };
      function applyLayout() {
        $tiles.imagesLoaded(function() {
          if ($handler.wookmarkInstance) {
            $handler.wookmarkInstance.clear();
          }
          $handler = $('li', $tiles);
          $handler.wookmark(options);
        });
      }
      function onScroll() {
        var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
            closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);
        if (closeToBottom) {
         	        var freequency=$("#freequency").val();//用于记录图片数量以便分页
                        //此处为动态请求后台数据库，取出更多的图片，返回的是json对象（分页后的集合对象）
                        $.post("imagereport/loadimge?pager.offset="+freequency,function(data){
				var data1 = eval(data);
				console.log(data1.datas.length);
				if (data1.datas.length == 0) {
					$("#nomore").html("");
					$("#nomore").append("<a >没有更多的图片了</a>")
					$("#nomore").addClass("nomore");
				}else{
					 for ( var i = 0; i < data1.datas.length; i++) {
						var url = data1.datas[i].url;
						var abstr = data1.datas[i].abstr;
						var id = data1.datas[i].id;
						var li = $("<li></li>");
						$("<img width=\"200px\" title=\"" + abstr + "\" >").attr("src",url).appendTo(li);
						$("<p><a href=\" imagereport/desc/"+data1.datas[i].id+"/"+data1.datas[i].web_REPORT_ID +"\">"+abstr+"</a><p>").appendTo(li);
						$tiles.append(li);
					}
					freequency=parseInt(freequency)+parseInt(data1.datas.length);
					$("#freequency").val(freequency); 
				}
				applyLayout();
			});
        }
      };
      applyLayout();
      $window.bind('scroll.wookmark', onScroll);
    })(jQuery);
  </script>
</body>
<html>

     
       /**
	 * 加载图片
	 * 
	 * @param model
	 * @return
	 */
        @ResponseBody@RequestMapping(value = "/loadimge")
         public Pager<WebImagePage> pobuliu1(Model model) {
            model.addAttribute("imagelist", imageReportService.getAllByjpg());
            return imageReportService.getAllByjpg();
         }
        /**
          * 首次请求显示图片
          * * @param model
          * @return
          */
        @RequestMapping(value = "/pubuliu")public String pobuliu(Model model) {
                  SystemContext.setPageSize(30);//由于分页的数量15为默认的，且在页面中显示的15中图片不能撑开使其显示滚动条，所以将默认分页数量改成30张
                  model.addAttribute("imagelist", imageReportService.getAllByjpg());
                  return "webimagereport/index";
        }

	/**
	 * 分页查询所有后缀名是图片
	 * 
	 * @return
	 */
	public Pager<WebImagePage> getAllByjpg() {
		String sql = "select a.id,a.abstr,a.web_report_id, b.url from t_web_image_report a ,t_web_report b where a.web_report_id=b.id";
		return imageReportDao.findByAliasSqlFromParams(sql, null,WebImagePage.class, false);
	}

注意事项：这里只是举个例子，但思路是一样的。动态请求的到的数据是分页后的集合数据。至于怎么分页和拿到分页数据就得自己写了，因项目使用的技术不同，可能写法不一致。如网上找不到此例子中的css和js文件，可以加我QQ984482616，我可以提供给你们。

效果图片如下所示：