瀑布效果

最新推荐文章于 2024-05-08 07:28:03 发布
最新推荐文章于 2024-05-08 07:28:03 发布
阅读量218 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38027483/article/details/82117273
版权 
<!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>
    <script src="js/jquery-1.12.4.js"></script>
</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 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>
</body>
</html>
<script>
    var wrap=$('#wrap');
    var boxs=$('.box');
    var boxW=boxs.eq(0).outerWidth();
    var colsNum=Math.floor(document.documentElement.clientWidth/boxW);
    wrap.width(boxW*colsNum);

    $(window).scroll(function () {
        var flag=false;
        var win=$(window).height()+$(window).scrollTop();
        var lastBox=$('.box').last().outerHeight()+$('.box').last().offset().top;
        if (win>lastBox-1){
            flag = true;
            $.ajax({
                url:'6.json',
                type:'get',
                dataType:'json',
                success:function (data) {
                    for(i in data){
                        var newHtml=$('<div class="box">\n' +
                            '        <div class="info">\n' +
                            '            <div class="pic"><img src="images/'+data[i].src+'"></div>\n' +
                            '            <div class="title">'+data[i].title+'</div>\n' +
                            '        </div>\n' +
                            '    </div>')
                        wrap.append(newHtml);
                    }
                }
            })
        }
    })
</script>
m0_38027483
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
樱花飞舞
diejian7742的博客
02-28 7362
<!doctype html> <html> <head> <meta charset="utf-8"> <title>樱花漫天飞舞</title> </head> <style> body { padding:0; margin:0; overflow:hidden; ...
android瀑布效果
08-20
android瀑布效果，让你的软件效果很炫！请多多指教
opengl 瀑布 waterfall
05-07
opengl粒子系统开发的瀑布模型,在水的颜色方面做了从上到下颜色的过渡,以及pool中有水泡的冒上,程序中加了个图片,感觉不是很好,可以将它去掉,那样看起来就真实多了
Unity URP ShaderGrapgh简单瀑布
qq_55895529的博客
07-21 477
Unity URP ShaderGrapgh简单瀑布
OpenGL自己实现一个粒子系统
qq_35077043的博客
05-20 6367
说起这个OpenGL粒子系统的实现其实只是之前游戏引擎架构课程中的一次作业，当时的作业要求是分别实现是个瀑布的粒子系统和一个烟花的粒子系统，看起来工作量是比较大的，当时我就想，能不能实现一个粒子系统的框架，能够同时用在这两个不同的粒子系统的实现中，从而起到减少重复工作量的效果？事实证明这是完全可行的，当我搭建好这个框架做完瀑布的粒子系统时很快就把另一个烟花的粒子系统也完成了。不过这个粒子系统说是框...
unity shader瀑布
阿拉平平的专栏
05-05 2116
瀑布shader
unity实现瀑布效果
aoxuestudy的专栏
08-04 2882
unity实现瀑布效果 使用unity粒子系统实现，下面是完整的视频展示制作过程 运行效果 视频地址 [瀑布特效地址](https://www.bilibili.com/video/BV1Hp4y1z7GC/?spm_id_from=333.788.recommend_more_video.2)
html--瀑布效果
最新发布
stqer的博客
05-08 5438
<!doctype html> <html> <head> <meta charset="utf-8"> <title>瀑布效果</title> <style> body { background: #222; color: white; overflow:hidden; } #container { box-shadow: inset 0 1px 0 #444, 0 -1px 0 #000; he
Android瀑布效果demo
07-28
android瀑布效果哦，很炫的，android瀑布效果哦，很炫的，android瀑布效果哦，很炫的，android瀑布效果哦，很炫的，
jquery瀑布效果
07-06
jquery瀑布效果,jquery瀑布效果jquery瀑布效果Javascript 的效果
瀑布流(加载更多)
01-03
瀑布流(加载更多)：http://blog.csdn.net/libin_1/article/details/50449837
OpenGL实现模拟瀑布的粒子系统
03-18
这是一个在VC6上实现的一个粒子系统，该系统用粒子模拟瀑布水流，系统产生很多粒子，粒子自由下落，打在地面的平面上又溅起再下落。每个粒子都有初速度和运动方向，粒子是用OpenGL的小球模拟的，粒子运动是用OpenGL的回调函数glutIdleFunc(animation)的animation()函数实现的。
一则C#简洁瀑布流代码
09-04
最近想实现数据的延迟加载，网上找一下有很多例子，看了Masonry的例子启发，自己写了一个很简洁的代码。分享给大家
绝美电子商务瀑布流首页(c#实现无限滚动加载)
04-28
欧美绝美电子商务瀑布流首页(c#实现无限滚动加载) 带测试数据，可以方便实现数据库读取
水花、瀑布等特效，unity自带粒子系统做的
10-03
水流、水花、瀑布特效，unity自带粒子系统做的，可以用来学习或使用，不用担心导入出错。。。。。。。
java编辑瀑布效果
06-06
java瀑布粒子效果
飞流直下，瀑布效果
11-10
运用多线程的 sleep（）方法再浏览器中显示出一个实现瀑布飞流直下的动画效果
Building Worlds In Unreal 学习笔记——07-11 岩石树落木灌木绘制/溪水着色器/潮湿与焦散贴花/后处理
清清！的博客
04-01 1066
Building Worlds In Unreal 学习笔记——Lec07 岩石与树 Rocks and Trees 本系列学习资料来源，Ben Cloward的油管空间，B站的搬运翻译 Lec07 岩石与树 Rocks and Trees 回来继续看看参考图 特征，到处都是石头，石头苔藓多 去Bidge找些资产来用 ...
简单瀑布（流水）效果
double kill = 2.0;
08-21 2145
步骤简单的瀑布效果 网格 纹理及纹理的设置 shader “ Shader “Mobile/流水（Test）” { Properties { _TintColor (“Tint Color”, Color) = (0.5,0.5,0.5,0.5) _EmissiveStrength (“Emissive strength”, Range (0,1)) =
canvas 实现瀑布效果
06-02
实现瀑布效果主要需要以下步骤： 1. 获取图片数据 使用 JavaScript 获取图片数据，可以通过 AJAX 请求或者使用 HTML5 文件读取器来获取。 2. 计算图片位置 将所有图片位置计算出来，需要根据图片高度来计算，将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值