码迷,mamicode.com
首页 > Web开发 > 详细

ajax 瀑布流 demo

时间:2018-06-27 21:06:03      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:wookmark   parse   xmlhttp   elements   sof   xhtml   nts   xhtml 1.0   img   

<!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

标签:wookmark   parse   xmlhttp   elements   sof   xhtml   nts   xhtml 1.0   img   

原文地址:https://www.cnblogs.com/moon-yyl/p/9235818.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!