规则瀑布流效果（局部刷新）

最新推荐文章于 2021-06-03 14:30:51 发布
最新推荐文章于 2021-06-03 14:30:51 发布
阅读量424 收藏 2
点赞数
文章标签： 规则瀑布流效果（局部刷新）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43469418/article/details/87922251
版权

html部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>瀑布流效果--规则的(局部刷新)</title>
    <style type="text/css">
        /* 公用样式 */
        body{padding:0;margin:0;}
        img{border:none;}
        a{text-decoration:none;color:#444;}
        a:hover{color:#999;}
        #title{width:600px;margin:20px auto;text-align:center;}
       
        /* wrap */
        #wrap{width:auto;height:auto;margin:0 auto;position:relative;}
        #wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}
        #wrap .box .info{width:280px;height:310px;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
        #wrap .box .info .pic{width:260px;height:260px;margin:0 auto;padding-top:10px;}
        #wrap .box .info .pic img{width:260px;border-radius:3px;}
        #wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}
    </style>
</head>
<body>
    <section id="title">
        <h2>js瀑布流效果特效代码</h2>
    </section>

    <div id="wrap">

        <div class="box">
        <div class="info">
            <div class="pic"><img src="images/1.jpg"></div>
            <div class="title"><a href="www.baidu" target="_blank"> 瀑布流效果</a></div>
        </div>
    </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/2.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/3.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/4.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/5.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/6.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/7.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.8.3.min.js" ></script>
    <!--<script src="js/index.js" type="text/javascript"></script>-->
    <script src="js/my.js" type="text/javascript"></script>
</body>
</html>

js部分


    $(function () {
        var wrap=$("#wrap");
        //var box=$(".box");
        $(window).scroll(function () {
            //获取滚轮滚动到当前位置的页面的高度=窗口的高度+卷曲出去的高度
            var boxH=$(window).height()+$(window).scrollTop();
            //获取页面高度=最后一个小盒子的高度+最后一个小盒子距离顶部的距离
            var lastBox=$(".box").last().height()+$(".box").last().offset().top;
            //到底了就加数据

            if(boxH>=lastBox){
                $.ajax({
                    type:"get",
                    url:"6.json",
                    dataType:"json",
                    success:function (data) {
                       // console.log(data);
                        for(var key in data){
                            var innerBox=$('<div class="box">\n' +
                                '            <div class="info">\n' +
                                '                <div class="pic"><img src="images/'+data[key].src+'"></div>\n' +
                                '                <div class="title">'+data[key].title+'</div>\n' +
                                '            </div>\n' +
                                '        </div>');
                            innerBox.appendTo(wrap);
                        }

                    }


                });
            };

        });


});

6.json部分

[
	{"src":"1.jpg","title":"111"},
	{"src":"2.jpg","title":"222"},
	{"src":"3.jpg","title":"333"},
	{"src":"4.jpg","title":"444"},
	{"src":"5.jpg","title":"555"},
	{"src":"6.jpg","title":"666"},
	{"src":"7.jpg","title":"777"},
	{"src":"8.jpg","title":"888"},
  	{"src":"7.jpg","title":"777"},
  	{"src":"8.jpg","title":"888"}
]
媛源缘
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html页面瀑布刷新方式
06-05
js实现瀑布刷新 即滚即刷动态添加内容到末端
CSS3不规则瀑布流布局特效
04-02
CSS3不规则瀑布流布局特效则在此基础上进一步创新，通过引入倾角和滤镜效果，为网页增添了更丰富的视觉体验。 首先，我们来详细了解一下CSS3中的关键知识点： 1. **Flexbox（弹性盒布局）**：虽然瀑布流布局早期多...
android 瀑布流下拉刷新,瀑布流下拉刷新
weixin_32956805的博客
05-29 219
知识点：使用瀑布流，实现数据列表的下拉刷新(1)引入waterfall.js，jquery.imageload.js，handlebars.js三个js文件(2)前端页面{{#waterfall data}} {{adv_time}}{{adv_resolving_power}}{{adv_size}}上传日期：{{create_time}} {{fi...
瀑布流下拉刷新
weixin_34414650的博客
09-04 151
知识点：使用瀑布流，实现数据列表的下拉刷新 （1）引入waterfall.js，jquery.imageload.js，handlebars.js三个js文件 （2）前端页面 <!-- 数据列表 --><div class="box" style=" border-top-width: 0px;margin-bottom: 0px;"> <div id...
html瀑布流下拉刷新,vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)...
weixin_39966602的博客
06-03 226
一、思路分析和效果图用vue来实现一个瀑布流效果，加载网络图片，同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现，捋下思路：根据加载数据的顺序，依次追加标签展示效果；选择哪种方式实现瀑布流，这里选择绝对定位方式；关键问题：由于每张图片的宽高不一样，而瀑布流中要求所有图片的宽度一致，高度随宽度等比缩放。而且由于图片的加载是异步延迟。在不知道图片高度的情况下，每个图片所在的item盒子不...
不规则瀑布流
weixin_30663471的博客
02-23 159
不规则瀑布流 1、创建一个继承自UICollectionViewLayout //说明WaterFlowLayout是一个类 @class WaterFlowLayout; 2、声明协议（实际上就是UICollectionViewDelegate中的协议，将UICollectionViewLayout*换成了自定义的WaterFlowLayout*） @protocol W...
安卓瀑布流相关-Android实现不规则瀑布流效果.rar
07-30
综上所述，实现Android的不规则瀑布流效果，需要结合RecyclerView、LayoutManager、数据加载、自定义布局等多个技术点，通过巧妙的编程技巧和优化策略，可以构建出流畅且美观的瀑布流界面。由于提供的压缩包可能未...
JavaScript实现图片瀑布流和底部刷新
10-20
在本篇文章中，我们将会介绍如何通过JavaScript技术实现图片瀑布流布局以及底部刷新功能，这在网页设计中是常见的布局方式，尤其用于图片展示网站，目的是为了使图片和文字内容的展示更具美感，避免呆板的排列，增强...
JS实现瀑布流效果
12-28
本文实例为大家分享了JS实现瀑布流效果的具体代码，供大家参考，具体内容如下 话不多说，直接上代码。如下： CSS部分： <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 4px...
JavaScript日记——实现图片的瀑布流和底部刷新
饥渴计科极客杰铿的博客
07-31 1204
瀑布流现在基本上是图片显示网页的标配，主要是为了适配图片和文字块的大小，使显示出的效果没有那么呆板 实现这个功能首先要有html，css和js基础首先先实现瀑布流即下一行的图片放在上一行的凹下去的地方基本的html代码如下<html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <link rel="
Demo.rar 底层5页demo，含首页banner轮播图，上拉刷新，下来加载，瀑布流布局，个人中心
06-10
底层5页demo，含首页banner轮播图，上拉刷新，下来加载，瀑布流布局，个人中心
android瀑布流，完美解决滑动过程中item位置错乱，下拉刷新顶部空白，加载更多顶部错乱等问题
01-03
StaggerdRecyclerView android瀑布流，完美解决滑动过程中item位置错乱，下拉刷新顶部空白，加载更多顶部错乱等问题，还可以实现动画效果 效果图 集成 allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { implementation 'com.github.moo611:StaggerdRecyclerView:latestversion' } 基本用法 1.布局文件里添加 2.您的model，需要实
局部刷新导致界面会闪烁的问题
04-17
局部刷新导致界面会闪烁的问题局部刷新导致界面会闪烁的问题
html瀑布流下拉刷新,能够下拉刷新跟上拉加载的瀑布流
weixin_32569511的博客
06-03 130
import android.annotation.SuppressLint;import android.annotation.TargetApi;import android.content.Context;import android.os.Build.VERSION;import android.os.Build.VERSION_CODES;import android.os.Bundle...
瀑布流样式实现小程序下拉刷新和上拉加载
月落星河
05-19 841
全局方法介绍 属性 类型 描述 链接 enablePullDownRefresh boolean（默认false） 是否开启当前页面下拉刷新 官方链接 onReachBottomDistance number（默认50） 页面上拉触底事件触发时距页面底部距离单位为px。 官方链接 页面的方法介绍 属性 类型 描述 onPullDownRefresh function 监听用户下拉动作 onReachBottom function 页面上拉触底事件的处理函数 d
实现不规则瀑布流滚动加载使用
weixin_44021910的博客
06-18 534
index.wxml // 滑动方向 scroll-y=“true” // 回到顶部功能标识 topNum=0将会置顶 scrolltoupper滚动触发事件获取滚动位置 // 使用获取屏幕高度赋值滚动区域高度scrollHeight // 滚动到底部触发事件load < scroll-view scroll-y="true" scroll-top='{{topNum}}' bin...
Masonry + Ajax 实现无限刷新瀑布流
weixin_30532987的博客
03-06 359
　　效果就如我的个人站yooao.cc，把我实现的思路分享给大家。 　　Masonry渲染页面如果有图片时需要imagesLoaded辅助，不然有可能会造成布局重叠。 　　一个大体的思路：前端取得最后一篇文章的id，下拉时进行Ajax请求添加文章进布局，并同时更新最后一篇文章的id，这样就可往复循环实现无限瀑布流刷新。 　　下面说说具体的实现： 一、前端 　　对于Masonry 的基本...
uni瀑布流下拉刷新
最新发布
06-11
UniApp的瀑布流布局（通常用于图片或卡片的瀑布式展示）和下拉刷新功能是其组件库中常用的设计模式，它们旨在提供流畅的用户体验，特别是在大量数据加载时。"uni瀑布流"通常指的是使用`uni-swiper`或自定义滚动组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值