<!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. python模块之shelve,xml,hashlib,configpaser

    shelve shelve模块也是一种可以将数据序列化的模块 使用方法 1. open 2. 读写 3. close 特点:使用方法比较简单 提供一个文件名字就可以开始读写,读写的方法和字典一致;跨平 ...

  2. SpringMVC学习笔记九:拦截器及拦截器的简单实用

    SpringMVC中的interceptor拦截器是非常重要的,它的主要作用就是拦截指定的用户请求,并进行相应的预处理和后处理. 拦截时间点在"处理器映射器根据用户提交的请求映射出所要执行的 ...

  3. java处理数据库date类型数据

    1.使用Date类和TimeStamp类的valueOf转换时间   Date.valueOf();   TimeStamp.valueOf();   如果这两种转换直接用在sal语句上,那么最外层要 ...

  4. linux增加history时间戳

    增加环境变量到/etc/profile export HISTTIMEFORMAT="%Y-%m-%d %H:%M:%S " export HISTSIZE=9999

  5. [大餐]开发摘记1--我的Fragment通信的框架

    [大餐]开发摘记1--我的Fragment通信的框架 | 卖牙膏的芖口钉 盒子 盒子 博客 分类 标签 友链 大专栏  [大餐]开发摘记1--我的Fragment通信的框架ass="ROUN ...

  6. GCD实现多个定时器，完美避过NSTimer的三大缺陷（RunLoop、Thread、Leaks）

    定时器在我们每个人做的iOS项目里面必不可少,如登录页面倒计时.支付期限倒计时等等,一般来说使用NSTimer创建定时器: + (NSTimer *)timerWithTimeInterval:(NS ...

  7. Jquery Ajax Post Json

    var markers = { "markers": [ { "position": "128.3657142857143", " ...

  8. STL标准库中的容器

    容器:顾名思义,我的理解就是把同一种数据类型括起来,作为一捆.如vector<int> ,vector就是个容器,里面全是一个个的int型数据. 容器包括三大块: 顺序型容器: (1)ve ...

  9. C++走向远洋——31（六周，项目一，1.1）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:fenshu.cpp * 作者:常轩 * 微信公众号:World ...

  10. cocoapods iOS类库管理工具的安装与使用

    CocoaPods是一个管理Swift和Objective-C的Cocoa项目的依赖工具.他可以优雅地帮助你扩展你的项目.简单的说,就是替你管理Swift和Objective-C的Cocoa项目的第三 ...