定宽Jquery+AJAX+JSON瀑布流布局

来源：互联网发布：httppost请求发送json 编辑：程序博客网时间：2024/06/05 18:24

1、

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定宽Jquery+AJAX+JSON瀑布流布局</title>
<style type="text/css">
body,ul,li,h3 {
   margin: 0;
   padding: 0;
   list-style: none;
   font: bold 12px "微软雅黑";
}
/*瀑布流布局样式*/
#lxf-box {
   position: relative;
   width: 1000px;
   margin: 0 auto;
}

#lxf-box li {
   background: #fff;
   border: solid 1px #ccc;
   text-align: center;
   padding: 10px;
   float: left;
}

h3 {
   padding-top: 8px;
}

img {
   width: 200px;
   height: auto;
   display: block;
   border: 0
}
/*css3动画注由于是css3制作的所以兼容性不保证要想兼容性好请自己做成gif动画加载图*/
/*li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s }*/
#loading {
   display: none;
   line-height: 30px;
   background: #000;
   color: #fff;
   text-align: center;
   height: 30px;
   width: 100%;
   position: fixed;
   bottom: 0;
   opacity: 0.8;
}
</style>
<script src="static/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
   <ul id="lxf-box">
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/Baby-50.png"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
       <li><a href="#"><img src="static/images/avatar_0.jpg"></a><h3>图片标题</h3></li>
   </ul>
   <div id="loading">正在加载……</div>
   <script>
       /*
       原理：1.把所有的li的高度值放到数组里面
       2.第一行的top都为0
       3.计算高度值最小的值是哪个li
       4.把接下来的li放到那个li的下面
       */

       function layoutBox() {
           var wrap = document.getElementById("lxf-box")
           var margin = 10;
           var li = $("li");
           //取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，
           //不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）
           var li_W = li[0].offsetWidth + margin;
           var h = [];//记录区块高度的数组
           li.css("position", "absolute");
           var n = wrap.offsetWidth / li_W | 0;//容器的宽度除以区块宽度就是一行能放几个区块
           for ( var i = 0; i < li.length; i++) {
               var li_H = li[i].offsetHeight;
               if (i < n) {//n是一行最多的li，所以小于n就是第一行了
                   h[i] = li_H;//把每个li放到数组里面
                   li.eq(i).css("top", 0);//第一行的Li的top值为0
                   li.eq(i).css("left", i * li_W);//第i个li的左坐标就是i*li的宽度
               } else {
                   min_H = Math.min.apply(null, h);//取得数组中的最小值，区块中高度值最小的那个
                   minKey = getarraykey(h, min_H);//最小的值对应的指针
                   h[minKey] += li_H + margin;//加上新高度后更新高度值
                   li.eq(i).css("top", min_H + margin);//先得到高度最小的Li，然后把接下来的li放到它的下面
                   li.eq(i).css("left", minKey * li_W); //第i个li的左坐标就是i*li的宽度
               }
               $("h3").eq(i).text("编号：" + i + "，高度：" + li_H);
               $("li").animate({opacity : 1});
           }
       }
       /* 返回数组中某一值的对应key */
       function getarraykey(s, v) {
           for (k in s) {
               if (s[k] == v) {
                   return k;
               }
           }
       }

       window.onload = function() {
           layoutBox();
       };

       window.onresize = function() {
           layoutBox();
       };

       /**********************************************************************/
       /*鼠标滚动到底部加载*/
       var i = 1;
       function getMore() {
           $("#loading").show();
           var path = "static/img.json";
           $.getJSON(path,
               function(obj) {
                   data = obj.datas;
                   $.each(
                       data,
                       function(j) {
                           var html = "<li style='opacity:1'><a href='#'><img src="+data[j].url+" ></a><h3>图片标题</h3></li>";
                           $("#lxf-box").append(html);
                           $("#loading").hide();
                       }
                   );
                   layoutBox();
                   i = 1;
               }
           );
       };
       /*绑定鼠标滚动事件*/
       $(window).bind(
               "scroll",
               function() {
                   if ($(document).scrollTop() + $(window).height() > $(document).height() - 10
                       && i == 1) {
                       i = 0;
                       getMore();
                   }
               });
   </script>
</body>
</html>

2、

{
"datas":[
{"url":"static/images/avatar_0.jpg"},
{"url":"static/images/Baby-50.png"},
{"url":"static/images/button2.png"},
{"url":"static/images/button4.png"},
{"url":"static/images/cloud_error.png"},
{"url":"static/images/Drug_Administration1.png"},
{"url":"static/images/errorico1.jpg"},
{"url":"static/images/errorico2.jpg"},
{"url":"static/images/head_admin.jpg"},
{"url":"static/images/login_bg3.png"}
]
}

阅读全文

0 0