实例：瀑布流 留言板
（一）瀑布流
瀑布流实现原理分析
1.ajax文件内容
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);
            }
        }
        
    }
}

2.HTML文件内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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 b = true; //相当于门/开关（如果门是开的 才能进去，然后锁门，做自己的事情，做完，再打开门）
        
        
        getList(); //进行第一页的加载
        
        //获取初始化数据，首先，通过ajax加载数据过来
        function getList(){
            
            ajax('get','getPics.php','cpage='+iPage,function(data){
            
            var data = JSON.parse(data);
            
            //做一下处理，数据不可能无限加载下去，如果数据没了，不能再加载了
            if( !data.length){
              //后续没有数据了
              return; //return出去了，没有机会把门打开了
            
            }
            //把数据一条一条的添加到页面中
            for(var i=0;i<data.length;i++){
                
                //获取高度最短的li
                var _index = getShort();
                
                var oDiv = document.createElement('div');
                var oImg = document.createElement('img');
                oImg.src = data[i].preview;
                oDiv.appendChild(oImg); //把当前图片添加到当前div里
                oImg.style.width = '225px';
                oImg.style.height = data[i].height *(225/data[i].width) + 'px';
                var oP = document.createElement('p');
                oP.innerHTML = data[i].title;
                oDiv.appendChild(oP);
                
                //把整个div添加到最短li里
                aLi[_index].appendChild(oDiv);
            }    
            b = true; //把门打开
        });
        
        }
        //当滚动条发生滚动时,判断最短的li是否进入可视区
        window.onscroll = function(){
                var _index = getShort();
            var oLi = aLi[_index]; //获取最短的li
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            
            //如果当前的li的top值+自身的高<可视区的高+滚动条滚动距离
            if( getTop(oLi)+oLi.offsetHeight < document.documentElement.clientHeight + scrollTop){
                if(b){
                    b = false; //进去以后把门关上，然后做自己的事情
                    iPage++;
                    getList();
                    }
            }
        }
        
        //找到最短一列li再那，封装一个函数
        function getShort(){
                var index = 0; //初始化
            var ih = aLi[index].offsetHeight;//当前li的高度
            for(var i=1; i<iLen; i++){ //for循环 把当前的每一个li取出来
                if(aLi[i].offsetHeight < ih){
                index = i;
                ih = aLi[i].offsetHeight;  //ih等于当前高
                }
            }
            return index;    
        }
        
        //封装一个函数，获取一个元素到页面的绝对值
        function getTop(obj){
                var iTop = 0; //初始化为0
            while(obj){  //当obj存在
                iTop += obj.offsetTop;
                obj = obj.offsetParent;
            }
            return iTop;
        }
            
    }
</script>
</head>

<body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

瀑布流 &留言板的更多相关文章

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

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

  2. RecylerView完美实现瀑布流效果

    RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...

  3. Android瀑布流照片墙实现，体验不规则排列的美感

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10470797 传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在 ...

  4. android瀑布流效果（仿蘑菇街）

    Android 转载分享(10)  我们还是来看一款示例:(蘑菇街)           看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此. ...

  5. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  6. RecyclerView实现瀑布流效果(图文详解+源码奉送)

    最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程 ...

  7. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  8. android 瀑布流效果(仿蘑菇街)

    我们还是来看一款示例:(蘑菇街)           看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此.就如我们的方角图形,斯通见惯后也就出 ...

  9. iOS开发-UICollectionView实现瀑布流

    关于瀑布流的实现网上有很多种解法,自定义控件,TableView+ScrollView,UICollectionView是iOS6发布之后用于展示集合视图,算起来已经发布三年左右了,不过知识点是不变的 ...

随机推荐

  1. Oracle merge

    oracle merge 語法:

  2. 提升 LaTeX 效率的小工具：Detexify LaTeX handwritten symbol recognition

    Detexify LaTeX handwritten symbol recognition 用 LaTeX 的人找符号的表示方法通常很费事,需要去翻长长的列表.Detexify 是一个省事的小网站,只 ...

  3. C# Thread 线程状态知识

    .NET 基础类库的System.Threading命名空间提供了大量的类和接口支持多线程.这个命名空间有很多的类.System.Threading.Thread类是创建并控制线程,设置其优先级并获取 ...

  4. 【jQuery 冻结任意行列】冻结任意行和列的jQuery插件

    实现原理: 创建多个div,div之间通过css实现层叠,每个div放置当前表格的克隆.例如:需要行冻结时,创建存放冻结行表格的div,通过设置z-index属性和position属性,让冻结行表格在 ...

  5. POJ 3067 Japan（经典树状数组）

    基础一维树状数组  题意:左边一排 1-n 的城市,右边一排 1-m 的城市,都从上到下依次对应.接着给你一些城市对,表示城市这两个城市相连,最后问你一共有多少个交叉,其中处于城市处的交叉不算并且每个 ...

  6. 常用eclipse 快捷键

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  7. light oj 1422 Halloween Costumes (区间dp)

    题目链接:http://vjudge.net/contest/141291#problem/D 题意:有n个地方,每个地方要穿一种衣服,衣服可以嵌套穿,一旦脱下的衣服不能再穿,除非穿同样的一件新的,问 ...

  8. BZOJ 1901 Zju2112 Dynamic Rankings ——树状数组套主席树

    [题目分析] BZOJ这个题目抄的挺霸气. 主席树是第一时间想到的,但是修改又很麻烦. 看了别人的题解,原来还是可以用均摊的思想,用树状数组套主席树. 学到了新的姿势,2333o(*￣▽￣*)ブ [代 ...

  9. JS(event事件)

    常用的event事件: 属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事 ...

  10. Codeforces Round #333 (Div. 2)

    水 A - Two Bases 水题,但是pow的精度不高,应该是转换成long long精度丢失了干脆直接double就可以了.被hack掉了.用long long能存的下 #include < ...