div流加载

var hasNext=true;//触发开关,防止多次调用事件
        var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
        var nScrollTop = 0;   //滚动到的当前位置
        var nDivHight = $(‘#main‘).height();
        $(‘#main‘).scroll(function(){
            nScrollHight = $(this)[0].scrollHeight;
            nScrollTop = $(this)[0].scrollTop;
            var paddingBottom = parseInt( $(this).css(‘padding-bottom‘) ),paddingTop = parseInt( $(this).css(‘padding-top‘) );
            if(nScrollTop + paddingBottom + paddingTop + nDivHight + 100 >= nScrollHight && hasNext==true){
                hasNext = false;
                $.ajax({
                    url:‘/blog/‘+page++,
                    data:‘‘,
                    type:‘post‘,
                    dataType:‘text‘,
                    success:function(result){
                        if(result.code){
                            $(‘#article-list‘).append(result);
                            hasNext = true;
                        }else{
                            hasNext = false;
                            $(‘#article-list‘).append(‘<div class="alert with-icon"><i class="icon-info-sign"></i><h3 class="content">‘+ result.message +‘</h3></div>‘);
                        }
                    }
                })
            }
        });
时间: 2024-11-11 16:38:08

div流加载的相关文章

js实现瀑布流加载图片效果

今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1.设定一行中的列数:2.取第一行中每一个div的高度并把每一个高度放进一个数组中:3.算出数组中最小高度的index值:4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值:5.以此类推实现多栏布局的瀑布流效果:6.如果最后一张div的高度

js自定义流加载

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePa

css3多列布局瀑布流加载样式

看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3多列属性瀑布流</title> <style> /*大层*/ .container{width:80%;margin: 0 auto;}

关于产品的一些思考——瀑布流加载

对网站页面的瀑布流加载已经忍受了很长时间,今天就在这里记录一下,讨论下那些令我"厌恶"的瀑布流加载. 当初好像是因为Pinterest,各大网站开始纷纷引入瀑布流加载方式,引入瀑布流仁者见仁智者见智,个人觉得还是不是很友好的(瀑布流适合图片类网站,针对文章性网站,真的不是很合适),我是可以在同一个页面看完所有相关的内容,可是我要无限地滚动鼠标,无限地点按向下箭头或者无限地点按空格键,还是觉得没有点击下一页要好,尤其是当用户看了很多内容,想回头寻找自己感兴趣的内容的时候,当然可以使用Ct

layui流加载及传参

<ul class="shop-list ml10 mr10 store_list" id='demo' style="margin-top:80px;"></ul> <script type="text/javascript"> layui.use('flow', function(){ var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即

rwcq 瀑布流加载

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="" /><meta name="description" content="<参考消息>由新

前端模拟5页瀑布流加载

html: 1 <div id="masonry" class="container-fluid"> 2 <div class="box"><img src="../../img/test/wty1.png"></div> 3 <div class="box"><img src="../../img/test/wty2.png&qu

[JS] 瀑布流加载

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="description" content=""> <title></title> <script type=&

WPF 流加载

/// <summary> /// datatable分页 /// </summary> /// <param name="dt">源datatable</param> /// <param name="PageIndex">第几页</param> /// <param name="PageSize">每页记录数</param> /// <ret