wf_js.html（展示页）

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title></title>
  7.         <style type="text/css">
  8.             * {
  9.                 margin: 0;
  10.                 padding: 0;
  11.             }
  12.             html,body {
  13.                 width: 100%;
  14.                 height: 100%;
  15.                 background: #f3f2f3;
  16.             }
  17.             #main {
  18.                 border: 1px solid red;
  19.                 width: 1225px;
  20.                 margin: 0 auto;
  21.             }
  22.             .column {
  23.                 width: 245px;
  24.                 float: left;
  25.             }
  26.         </style>
  27.     </head>
  28.  
  29.     <body>
  30.         <button id="btn">加载图片</button>
  31.         <div id="main">
  32.             <div class="column"></div>
  33.             <div class="column"></div>
  34.             <div class="column"></div>
  35.             <div class="column"></div>
  36.             <div class="column"></div>
  37.         </div>
  38.     </body>
  39. </html>
  40. <script src="ajax.js"></script>
  41. <script type="text/javascript">
  42.     //点击按钮  首先加载数据到不同的列上
  43.     var cols = document.getElementsByClassName("column");
  44.     btn.onclick = function(){
  45.         ajax( "pbl.json" , function(msg){
  46.             var arr = JSON.parse( msg );
  47.             for( var i = 0 ; i < arr.length ; i++ ){
  48.                 var pro = arr[i];
  49.                 var oimg = document.createElement("img");
  50.                 oimg.src = pro.src;
  51.                 //设置图片的宽度和高度
  52.                 oimg.width = "245";
  53.                 oimg.height = pro.height;
  54.                 //获取最小高度列的索引
  55.                 var index = getMinHeightIndex();
  56.                 cols[index].appendChild( oimg );
  57.             }
  58.         } )
  59.     }
  60.  
  61.     ///定义一个函数 功能是获取最小高度列的下标
  62.     function getMinHeightIndex(){
  63.         //假设五列中第一列的高度是最小的
  64.         var minHeight = cols[0].offsetHeight;
  65.         var index = 0;//第一列的下标
  66.         for( var i = 0 ; i < cols.length ; i++ ){
  67.             if( minHeight > cols[i].offsetHeight ){
  68.                 minHeight = cols[i].offsetHeight;
  69.                 index = i;
  70.             }
  71.         }
  72.         return index;
  73.     }
  74.  
  75.     window.onscroll = function(){
  76.         var sTop = document.documentElement.scrollTop || document.body.scrollTop;
  77.         //当最小高度列高 < 可视窗口高度+页面滚走的距离 时  开始加载数据
  78.         var winHeight = window.innerHeight;
  79.         var minHeight = cols[getMinHeightIndex()].offsetHeight;
  80.         if( minHeight < winHeight + sTop ){
  81.             btn.onclick();//持续加载图片
  82.         }
  83.     }
  84. </script>

ajax.js

  1. function ajax(url,fnWin,fnFaild){
  2.     var ajax = null;
  3.     if (window.XMLHttpRequest) {
  4.         ajax = new XMLHttpRequest();
  5.     }else{
  6.         ajax = new ActiveXObject("Microsoft.XMLHTTP");
  7.     }
  8.     ajax.open("get",url,true);
  9.     ajax.send();
  10.     ajax.onreadystatechange = function (){
  11.         if (ajax.readyState==4) {
  12.             if(ajax.status == 200){
  13.                 if (fnWin) { //判断该函数是否存在，如果存在，就调用  返回结果
  14.                     fnWin(ajax.responseText);
  15.                 }
  16.             }else{
  17.                 if (fnFaild){
  18.                     fnFaild();
  19.                 }
  20.             }
  21.         }
  22.     }
  23. }

pbl.json

  1. [
  2. {"src":"img/1.jpg","alt":"1","height":"343"},
  3. {"src":"img/2.jpg","alt":"2","height":"300"},
  4. {"src":"img/3.jpg","alt":"3","height":"230"},
  5. {"src":"img/4.jpg","alt":"4","height":"230"},
  6. {"src":"img/5.jpg","alt":"5","height":"306"},
  7. {"src":"img/6.jpg","alt":"6","height":"333"},
  8. {"src":"img/7.jpg","alt":"7","height":"335"},
  9. {"src":"img/8.jpg","alt":"8","height":"172"},
  10. {"src":"img/9.jpg","alt":"9","height":"172"},
  11. {"src":"img/10.jpg","alt":"10","height":"345"},
  12. {"src":"img/11.jpg","alt":"11","height":"340"},
  13. {"src":"img/12.jpg","alt":"12","height":"153"},
  14. {"src":"img/13.jpg","alt":"13","height":"345"},
  15. {"src":"img/14.jpg","alt":"14","height":"316"},
  16. {"src":"img/15.jpg","alt":"15","height":"327"},
  17. {"src":"img/16.jpg","alt":"16","height":"345"},
  18. {"src":"img/17.jpg","alt":"17","height":"172"},
  19. {"src":"img/18.jpg","alt":"18","height":"282"},
  20. {"src":"img/19.jpg","alt":"19","height":"224"},
  21. {"src":"img/11.jpg","alt":"11","height":"340"},
  22. {"src":"img/12.jpg","alt":"12","height":"153"},
  23. {"src":"img/13.jpg","alt":"13","height":"345"},
  24. {"src":"img/14.jpg","alt":"14","height":"316"},
  25. {"src":"img/15.jpg","alt":"15","height":"327"},
  26. {"src":"img/16.jpg","alt":"16","height":"345"},
  27. {"src":"img/17.jpg","alt":"17","height":"172"},
  28. {"src":"img/18.jpg","alt":"18","height":"282"},
  29. {"src":"img/19.jpg","alt":"19","height":"224"},
  30. {"src":"img/20.jpg","alt":"20","height":"344"}
  31. ]

瀑布流之ajax的更多相关文章

  1. 瀑布流原生ajax，demo

    最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释 img:ajax.php:demo.php 其中img中放入图片 1.jpg: ...

  2. AJAX异步实现简单的瀑布流

    传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...

  3. 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

    瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...

  4. Masonry + Ajax 实现无限刷新瀑布流

    效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...

  5. [妙味Ajax]第二课：实例：留言板、瀑布流

    知识点总结 瀑布流原理(固定布局) 总宽度大小固定 每列宽度固定,比如LI,高度自动计算,每列使用float:left来布局 计算最短的一列,将Div插到最短的一列处(li里面包div)(getSho ...

  6. 服务器代理+jQuery.ajax实现图片瀑布流

    服务器代理机制破解浏览器的同源策略 瀑布流功能实现分析 具体实现代码及业务实现分析 一.服务器代理机制破解浏览器同源策略 由于浏览器的同源策略无法请求不同域名下的资源,但是服务器的后台程序并不受同源策 ...

  7. 原生ajax瀑布流demo

    最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...

  8. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  9. Ajax——瀑布流

    基本概念 1.宽度是一致的,高度上参差不齐 2.新增内容优先放置在最矮的地方 核心难点 1.用一个数组存储每列的高度值 2.新值添加到值最小索引上,每次替换更新数组 插件使用 1.$.fn.exten ...

随机推荐

  1. SSH高级服务

    SSH端口转发 SSH 会自动加密和解密所有 SSH 客户端与服务端之间的网络数据.但是,SSH 还能够将其他 TCP 端口的网络数据通过 SSH 链接来转发,并且自动提供了相应的 加密及解密服务.这 ...

  2. 类属性"get"必须声明主体,因为它未标记为 abstract 或 extern[解决方法]

    当在页面cs文件中,写类属性时,运行会碰到以下问题:CS0501: “ASP.default_aspx.Person.Level.get”必须声明主体,因为它未标记为 abstract 或 exter ...

  3. NYOJ 布线问题

    #include<iostream> #include<stdio.h> #include<queue> #include<algorithm> usi ...

  4. List与Array互相转换

    List转换为Array可以这样处理: ArrayList<String> list=new ArrayList<String>(); String[] strings = n ...

  5. css篇-less,scss 用calc问题

    在less或者scss中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位,全部按照百分比计算,此例中的计算被less编译成calc(96%), 解决办法: width:(& ...

  6. ftp工具类

    package com.ytd.zjdlbb.service.zjdlbb; import java.io.File;import java.io.FileInputStream;import jav ...

  7. sqlite基本操作

    sqlite准备步骤; .下载:https://www.sqlite.org/download.html: sqlite-dll-win64-3250200.zip 和 sqlite-tools-wi ...

  8. ORM表操作

    1.在python脚本中调用django环境 在根文件夹下,创建test.py文件 import os if __name__ == '__main__': os.environ.setdefault ...

  9. update moudle 调用方式

    向数据库中添加数据  ztt_teacher 1:  创建一个 function moudle,设置该moudle类型为  update moudle 2: 向数据库添加数据的代码 FUNCTION ...

  10. (转载)Spring定时任务的几种实现

    spring框架定时任务 一．分类 从实现的技术上来分类,目前主要有三种技术(或者说有三种产品): Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerT ...