<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

    body {margin: 0;}

    #ul1 {width: 1080px; margin: 100px auto 0;}

    li { width: 247px; list-style: none; float: left; margin-right: 10px; }

    li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}

    li div img { width: 225px; display: block;}

</style>

<script src="ajax.js"></script>

<script>

    window.onload = function(){

        var oUl = document.getElementById('ul1');

        var aLi = oUl.getElementsByTagName('li');

        var iLen = aLi.length;

        var ipage = 1;

        var onOff = true;

        getList();

        function getList(){

            ajax('get','getPics.php','cpage='+ipage,function(data){

            var data = JSON.parse(data);

            if(!data){

                return;

            }

            for(var i=0;i<data.length;i++){

                    var _index = getShort();

                    var oDiv = document.createElement('div');

                    var oImg = document.createElement('img');

                    oImg.src = data[i].preview;

                    oImg.style.width = '225px';

                    oImg.style.height =  data[i].height * ( 225 / data[i].width ) + 'px';

                    oDiv.appendChild(oImg);

                    var oP = document.createElement('p');

                    oP.innerHTML = data[i].title;

                    oDiv.appendChild(oP);

                    aLi[_index].appendChild(oDiv);

            }

            onOff = true;

          });

        }

        /*拉动滚动条触发*/

        window.onscroll = function(){

            var _index = getShort();

            var oLi = aLi[_index];

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            if(getTop(oLi)+oLi.offsetHeight < document.documentElement.clientHeight +scrollTop ){

                if(onOff){

                    onOff = false;

                    ipage++;

                    getList();

                }

            }

        };

        /*获取元素top*/

        function getTop(obj){

            var iTop = 0;

            while(obj){

                iTop += obj.offsetTop;

                obj = obj.offsetParent;

            }

            return iTop;

        }

        /*获取页面li的最短高度*/

        function getShort(){

            var index = 0;

            var ih = aLi[index].offsetHeight;

            for(var i=1;i<iLen;i++){

                if(ih > aLi[i].offsetHeight){

                    index = i;

                    ih = aLi[index].offsetHeight;

                }

            }

            return index;

        }

    };

</script>

</head>

<body>

    <ul id='ul1'>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

</html>
function ajax(method, url, data, success) {

    var xhr = null;

    try {

        xhr = new XMLHttpRequest();

    } catch (e) {

        xhr = new ActiveXObject('Microsoft.XMLHTTP');

    }

    if (method == 'get' && data) {

        url += '?' + data;

    }

    xhr.open(method,url,true);

    if (method == 'get') {

        xhr.send();

    } else {

        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

        xhr.send(data);

    }

    xhr.onreadystatechange = function() {

        if ( xhr.readyState == 4 ) {

            if ( xhr.status == 200 ) {

                success && success(xhr.responseText);

            } else {

                alert('出错了,Err：' + xhr.status);

            }

        }

    }

}
<?php

header('Content-type:text/html; charset="utf-8"');

/*

API:

    getPics.php

        参数

        cpage : 获取数据的页数

*/

$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;

$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;

$content = file_get_contents($url);

$content = iconv('gbk', 'utf-8', $content);

//echo $content;

?>

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

  1. 原生ajax瀑布流demo

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

  2. Ajax——瀑布流

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

  3. Hawk 3.1 动态页面,ajax,瀑布流

    不少朋友反映,Hawk的手气不错,好像没法处理动态页面.其实很容易,比其他软件都容易,让我慢慢道来. 1. 什么是动态页面 很多网站,在刷新的时候会返回页面的全部内容,但实际上只需要更新一部分,这样可 ...

  4. ajax 瀑布流实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery ajax瀑布流加载静态的列表页面

    1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...

  6. iOS 瀑布流的Demo

    /** * 瀑布流Demo的主要代码,若想看完整的代码请到下面链接去下载 * * 链接: https://pan.baidu.com/s/1slByAHB 密码: r3q6 */ #import &l ...

  7. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

  8. 瀑布流原生ajax，demo

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

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

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

随机推荐

  1. MyBatis延迟加载及缓存

    延迟加载 lazyLoadingEnabled 定义: MyBatis中的延迟加载也成为懒加载,就是在进行关联查询的时候按照设置延迟加载规则推迟对关联对象的select检索.延迟加载可以有效的减少数据 ...

  2. 转发： python3.7下 Flask-SQLAlchemy中解决1366报错

    原链接:https://segmentfault.com/a/1190000010596306 详情: 安装MySQL驱动(我升级过Python,所以要再装一遍) 本想安装MySQL官方驱动mysql ...

  3. [洛谷P3384] [模板] 树链剖分

    题目传送门 显然是一道模板题. 然而索引出现了错误,狂wa不止. 感谢神犇Dr_J指正.%%%orz. 建线段树的时候,第44行. 把sum[p]=bv[pos[l]]%mod;打成了sum[p]=b ...

  4. xpath_note - Ethan Lee

    https://ethan2lee.github.io/ XPath概览 XPath,全称XML Path Language,即XML路径语言,它是一门在XML文档中查找信息的语言.它最初是用来搜寻X ...

  5. –IDEA+Maven+JavaWeb+tomcat项目搭建（图文并茂，详细）

    一.创建Maven项目 1:如果刚打开IDEA,显示的是这个页面,我们直接单击 Create New Project(创建项目) 或者 File-> New-> Project 2:选中左 ...

  6. rsync auth failed on module xxx

    rsync 报错 "auth failed on module xxx", 一般有三种情况造成: 密码文件格式错误: 服务端密码文件的格式是: user:password 每个一行 ...

  7. Linux USB 鼠标驱动程序详解（转）

    Linux USB 鼠标驱动程序详解 USB 总线引出两个重要的链表!一个 USB 总线引出两个重要的链表,一个为 USB 设备链表,一个为 USB 驱动链表.设备链表包含各种系统中的 USB 设备以 ...

  8. 【问】：和=在map里面的区别

  9. React Native Build Apk

    1 React Native安卓项目打包APK 1.1 产生签名的key 先通过keytool生成key 1 keytool -genkey -v -keystore demo-release-key ...

  10. 笔记: SpringBoot + VUE实现数据字典展示功能

    最近一直在写前端,写得我贼难受,从能看懂一些基础的代码到整个前端框架撸下来鬼知道我经历了啥(:´д｀)ゞ 项目中所用到的下拉菜单的值全部都是有数据库中的数据字典表来提供的,显示给用户的是的清晰的意思, ...