瀑布流 下拉无限加载 json异步数据

最新推荐文章于 2023-07-29 22:03:12 发布
置顶 最新推荐文章于 2023-07-29 22:03:12 发布
阅读量1w 收藏 6
点赞数 1
文章标签： json asp.net 控件 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        /*这里我们添加一些CSS定义*/#w h1
        {
            color: #fff;
            font-size: 14px;
            line-height: 35px;
            padding: 5px;
            margin-bottom: 25px;
            background: #d85588;
            border-left: 5px solid #b44771;
        }
        h2
        {
            font-size: 12px;
            font-weight: bold;
            overflow: hidden; /*white-space: nowrap;  不换行*/
            line-height: 20px;
        }
        .linkc
        {
            width: 100%;
        }
        #morewrapper
        {
            text-align: center;
            padding: 30px;
            position: relative;
        }
        #morewrapper span
        {
            font-size: 14px;
            font-family: 'microsoft yahei' , Arial, sans-serif;
            color: #fff;
            border: 1px solid #D85588;
            padding: 10px 15px;
            background: #D85588;
            cursor: pointer;
        }
        /*如果需要添加一些CSS过渡效果，请添加如下代码*/.isotope, .isotope .isotope-item
        {
            -webkit-transition-duration: 0s;
            -moz-transition-duration: 0s;
            -ms-transition-duration: 0s;
            -o-transition-duration: 0s;
            transition-duration: 0s;
        }
        .isotope
        {
            -webkit-transition-property: height, width;
            -moz-transition-property: height, width;
            -ms-transition-property: height, width;
            -o-transition-property: height, width;
            transition-property: height, width;
        }
        .isotope .isotope-item
        {
            -webkit-transition-property: -webkit-transform, opacity;
            -moz-transition-property: -moz-transform, opacity;
            -ms-transition-property: -ms-transform, opacity;
            -o-transition-property: -o-transform, opacity;
            transition-property: transform, opacity;
        }
    </style>
    <!--倒入需要引用的JS类库 -->

    <script type="text/javascript" src="http://www.gbtags.com/gb/networks/uploads/06242ba0-40a1-45fd-946f-cc89e0df64c9/js/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" src="http://www.gbtags.com/gb/networks/uploads/06242ba0-40a1-45fd-946f-cc89e0df64c9/js/jquery.jribbble.min.js"></script>

    <script type="text/javascript" src="http://www.gbtags.com/gb/networks/uploads/06242ba0-40a1-45fd-946f-cc89e0df64c9/js/jquery.isotope.min.js"></script>

    <script type="text/javascript" src="http://www.gbtags.com/gb/networks/uploads/06242ba0-40a1-45fd-946f-cc89e0df64c9/js/jquery.imagesloaded.min.js"></script>

    <script type="text/javascript">
        var zxPage = 1;
        $(function() {

            //底部执行方法  下拉
            $(window).bind('scroll', function() { show() });

            function show() {

                if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
                    $('#showmore').text('加载中...');
                    loadshots();
                }
            }

            //数据加载
            //定义相关变量
            var $wallcontent = $('#wallcontent'), pagenum = 1, $showmore = $('#showmore');

            //定义isotope的初始参数
            $wallcontent.isotope({
                itemSelector: 'article' //定义页面中那个元素作为isotope布局元素
            });

            //定义用户点击按钮“加载更多”后的逻辑
            function loadshots() {
                //这里unbind点击事件
                $showmore.off('click');

                $(this).text('加载中...');

                //这里调用jdribble的相关API来获取最流行的dribbble设计作品，如果你需要获取其它数据，例如ajax在，这里修改即可

                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: 'testzhou.aspx?NoCopyRight=1&type=ajax&Action=GetList' + '&Page=' + zxPage,
                    cache: false,
                    success: function(json) {
                        if (json.productFwm.length > 0) {
                            var items = [];

                            $.each(json.productFwm, function(i, shot) {
                                items.push('<article style="border-bottom: 2px solid #000000;width: 100%;">');
                                items.push('<div class="details" ><h2>发表者：' + shot.UserName + '    发表时间：' + shot.Addtime + '</h2></div>');
                                items.push('<div class="details" style="font-size:12px;">' + shot.Contents + '</div>');
                                if (shot.Images != "") {
                                    items.push('<a href="' + shot.Images + '" target="_blank" class="linkc"><img src="' + shot.Images + '"></a>');
                                    items.push('<img src="http://etp2012.wsdict.com:8000/upload/ProductImg/329/29/c3cf4f99a1e3cab6.jpg">');
                                    items.push('<img src="http://etp2012.wsdict.com:8000/upload/ProductImg/206/6/3213365a9a5aa98c.jpg">');
                                    items.push('<img src="http://etp2012.wsdict.com:8000/upload/uploadfiles/logo.gif">');
                                    items.push('<img src="http://etp2012.wsdict.com:8000/upload/ProductImg/329/29/c3cf4f99a1e3cab6.jpg">');
                                    items.push('<img src="http://etp2012.wsdict.com:8000/upload/ProductImg/329/29/c3cf4f99a1e3cab6.jpg">');
                                    
                                }
                                items.push('<div class="details"><h2>回复数：' + shot.RepNum + '    发表时间：' + shot.Addtime + '</h2></div>');
                                items.push('</article>');

                            });

                            var newEls = items.join(''), tmpcontent = $(newEls);

                            $wallcontent.append(tmpcontent);

                            //如果你需要加载内容中包含了图片，可能需要预先加载，以避免布局元素的叠加情况，代码如下：
                            //$wallcontent.isotope('appended', tmpcontent).isotope('reLayout');

                            $wallcontent.imagesLoaded(function() {
                                $wallcontent.isotope('appended', tmpcontent).isotope('reLayout');
                                //加载完成后重新bind事件
                                $showmore.text('加载更多>>').on('click', loadshots);
                            });

                            //以上代码保证生成布局前，所有图片都已经加载
                        } else {
                            $showmore.text('没有更多数据');
                            //解除事件绑定
                            $(window).unbind("scroll");
                            return;
                        }
                    },
                    error: function() { alert('error'); }
                });       //end ajax

                zxPage++;
            }

            //绑定方法到加载更多按钮
            $showmore.on('click', loadshots);

            //最后我们添加一个自动点击效果，这样用户加载页面自动会加载第一页
            $showmore.trigger('click');
        });
    </script>

</head>
<body>
    <!-- 首先我们设计HTML -->
    <div style="width: 400px; text-align: center; margin: 0 auto;">
        <section id="w">
  <h1>酒真快-社区论坛</h1></section>
  <section id="wallcontent"></section>
  
  <div id="morewrapper">
    <span id="showmore">加载更多>></span>
  </div>
    </div>
</body>
</html>


Top_小鑫
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
瀑布流分页加载asp.net mvc demo
08-22
一个瀑布流分页加载的demo。送给需要的同学
瀑布流布局-kissy-asp.net瀑布流_json数据
09-21
这个demo是以前做的一个项目拷贝下来的，是利用kissy提供的插件做出来的瀑布流布局，因为之前的项目很大，文件很大，我不能把整个项目拷上来吧，so，所以我把主要的东西整理下发上去，这个直接运行是看不到效果的，因为读取数据那部分要你自己去写（到你自己数据库去读）我有注释一些，嗯嗯有些人慎重下载啊
CSS3实现瀑布流布局与无限加载图片相册的实例代码
12-13
目录 一、pic1.html页面代码如下： 二、模拟数据库数据的实体类Photoes.cs代码如下： 三、服务器返回数据给客户端的一般处理程序Handler1.ashx代码如下： 四、示例下载： 五、了解更多瀑布流布局的的知识 首先给大家看一下瀑布流布局与无限加载图片相册效果图： 一、pic1.html页面代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流布局与无限加载图片相册</title> <style t
ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
01-02
闲来无事，琢磨着写点东西。貌似页面下拉加载数据，瀑布流的效果很火，各个网站都能见到各式各样的展示效果，原理大同小异。于是乎，决定自己写一写这个效果，希望能给比我还菜的菜鸟们一点参考价值。 在开始之前，先把实现的基本原理说一下。当夜幕下拉到底部的时候，js可以判断滚动条的位置，到达底部触发js方法，执行jquery的ajax方法，向后台一般处理程序夜幕ashx文件请求数据源，得到json格式的数据源。然后，遍历json数据源，拼接一个li标签，再填充到页面上去。 首先，我们来做个简单的html页面。页面里需要引入jquery库，然后用jquery的ajax方法去请求后台程序，也就是一般处理程序页
vant list的列表，瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。
qq_43371287的博客
07-11 1418
由于手机的屏幕长度限制，如果获取的列表数据有很多条，就需要使用预加载的形式。手机下滑多少，就加载多少条数据。 主要后端传参的字段：take（每次加载获取多少条数据,初始化一般为8，列表足够填满手机屏幕就好），skip（再次获取数据时跳过多少条数据，一般都是跳过take*skip条）。 data() { return { Skip: 0, Take: 8, }, ...
023-流加载
aihiao的专栏
01-24 569
1. 流加载包含信息流加载和图片懒加载两大核心支持, 无论是对服务端、还是前端体验, 都有非常大的性能帮助。 2. 模块加载名称: flow。 3. flow模块包含两个核心方法 3.1. flow模块包含两个核心方法: 信息流和图片懒加载: layui.use('flow', function(){ var flow = layui.flow; // 信息流 flow.load(options); // 图片懒加载 flow.lazyimg(options); }
瀑布流无限加载的原理
qq_26889291的博客
11-19 857
文中可能有不对的地方仅供参考 无限加载也叫上拉自动加载、瀑布流、滑动底部加载等，具体指的是页面刚开始不加载全部内容， 先加载首屏或者用户屏幕可见内容，当用户滑动页面到底部后，页面才自动加载更多内容。 通过window.scrollY获取界面滚动多少距离 通过windwo,innerHeight获取视窗的高度 然后获取列表容器的高度 contentHeight window.scrollY + window,innerHeight < contentHeight 说明列表底部还没有显示出来 wind
26.流加载
qq_34820433的博客
04-25 657
测试 + ' + i + 'page=' + page + '')PS：这里的原理是将 lay-src 的图片地址，在屏幕可见时，转换成 src 并加载图片；//假设总页数为 10。本节课我们来开始了解 Layui 的内置模块：流加载模块。1. 流加载分为信息加载和图片懒加载，我们先来看信息加载；2. 图片懒加载，当图片可见时加载；测试
layui框架学习（33：流加载模块）
gc_2299的博客
07-29 689
学习并记录layui框架中内置模块的流加载模块的函数、参数设置方式。
layui使用flow流加载数据.rar
03-20
通过使用第三方开放组件layui中的流加载，信息流加载和图片懒加载两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。你可能已经在太多的地方看到她们的身影了。
瀑布流(加载更多)完整demo
03-14
这是一个完整的瀑布流的demo，代码简洁明了。对你一定有帮助
瀑布流+无限滚动加载数据
08-14
NULL 博文链接：https://nbczw8750.iteye.com/blog/2316765
js实现瀑布流并可加载更多
05-30
利用JavaScript实现了瀑布流，并可以加载更多！
瀑布流(加载更多)
01-03
瀑布流(加载更多)：http://blog.csdn.net/libin_1/article/details/50449837
jquery实现瀑布流效果 jquery下拉加载新数据
10-20
主要为大家详细介绍了jquery实现瀑布流效果，下拉加载新数据,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery瀑布流特效代码 支持无限下拉异步加载图片
02-18
最早采用瀑布流布局的网站是Pinterest，如今已经成为很多图片类网站的标配，今天推荐的这款基于jQuery的瀑布流特效代码，支持无限下拉显示图片，通过ajax异步加载可以显示更多的图片，显示效果和功能很不错，无论是...
关于layui的下拉搜索框异步加载数据的解决方法
10-16
今天小编就为大家分享一篇关于layui的下拉搜索框异步加载数据的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jquery 下拉加载+ 瀑布流+mustache
最新发布
09-25
综上所述，使用jQuery下拉加载、瀑布流和Mustache可以实现在网页中实现下拉加载新数据的功能，并使用瀑布流布局展示数据，最后通过Mustache模板引擎渲染数据到页面中。这样能够提升用户体验和页面的可视性，实现更...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值