带有分散效果的瀑布流（jQuery实现）

2023-05-16

初始数据集中在窗口底部，通过动画移动摆动到正确的位置，同样模拟网络加载数据时，图片也从窗口底部“动画”摆放到正确的位置。

如下图所示，这是初始数据移动的过程。

移动结束后，初始数据摆放在正确的位置：

加载数据——数据从窗口底部分散到正确的摆放位置：

exec.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有分散效果的瀑布流</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/scriptExec1.js"></script>
</head>
<body>
    <div id="main">
        <div class="box">
            <div class="pic"><img src="images/1.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/2.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/3.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/4.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/5.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/6.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/7.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/8.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/9.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/10.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/11.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/12.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/13.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/14.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/15.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/16.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/17.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/18.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/19.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/20.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/21.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/22.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/23.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/24.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/25.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/26.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/27.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/28.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/29.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/30.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/31.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/32.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/33.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/34.jpg" alt=".jpg"></div>
        </div>

        <div class="box">
            <div class="pic"><img src="images/35.jpg" alt=".jpg"></div>
        </div>
    </div>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
}

#main {
    position: relative;
}

.box {
    padding: 15px 0 0 15px;
    float: left;
}

.pic {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}

.pic img {
    width: 165px;
    height: auto;
}

scriptExec1.js

/**
 * Created by DreamBoy on 2016/2/5.
 */
/* 带有分散效果的瀑布流*/

var ww, wh, boxs;
var hArr = []; //存储每列的高度
$(window).on("load", function() {
    ww = $(window).width(); //窗口宽度
    wh = $(window).height(); //窗口高度
    boxs = $("#main>div");

    var boxsArr = jQtoArray(boxs);
    initBoxsPos(boxsArr);
    waterfall(boxsArr);


    var dataInt = {"data" : [
        {"src":"1.jpg"},{"src":"7.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}
    ]};

    $(window).on("scroll", function() {

        var boxArr = [];
        if(checkScrollSlide()) {

            $.each(dataInt.data, function(key, value) {
                $box = $("<div>").addClass("box");
                $pic = $("<div>").addClass("pic").appendTo($box);
                $img = $("<img>").attr("src", "images/" + value.src).appendTo($pic);

                boxArr.push($box);

                $box.appendTo($("#main"));
            });

            initBoxsPos(boxArr);
            waterfall(boxArr);
        }
    });

    /*$(window).on("resize", function() {
        boxs = $("#main>div");
        var boxsArr = jQtoArray(boxs);

        hArr = [];
        for(var i = 0; i < boxsArr.length; i++) {
            boxsArr[i].removeAttr("style");
            boxsArr[i].css("position", "absolute");
        }

        initBoxsPos(boxsArr);
        waterfall(boxsArr);
    });*/
});

// 将遍历得到的jQuery对象转为数组存储
function jQtoArray(jq) {
    var boxsArr = [];
    for(var i = 0; i < jq.length; i++) {
        boxsArr[i] = jq.eq(i);
    }
    return boxsArr;
}

//初始化盒子的位置
function initBoxsPos(newBoxs) {
    //设置初始盒子的位置
    $.each(newBoxs, function(index) {
        setBoxPos(newBoxs[index]);
    });
}

// obj —— jQuery对象
function setBoxPos(newBox) {
    var margin_left = Math.floor(- newBox.outerWidth() / 2 + ((Math.random() * 10) < 5 ? -1 : 1) * (Math.random() * 200));
    var margin_top = Math.floor(- newBox.outerHeight() / 2 + ((Math.random() * 10) < 5 ? -1 : 1) * (Math.random() * 200));

    newBox.css({
        "position": "absolute",
        "top": wh + $(window).scrollTop(),
        "left": ww / 2,
        "margin-left": margin_left,
        "margin-top": margin_top
    });
}

//将所有 newBoxs 新盒子“放好”
function waterfall(newBoxs) {
    var w = newBoxs[0].outerWidth(); //盒子的宽度
    //计算列数
    var cols = Math.floor(ww/w);


    $.each(newBoxs, function(index) {
        var box = newBoxs[index];
        var h = box.outerHeight();

        if(index < cols && hArr.length < cols) {  //hArr.length < cols 条件是为了区分后续的数据加载，表明已经有一行排在第1行了。
            hArr[index] = h;

            //移动第1行盒子到正确的位置
            moveBox(box, index * w, 0);
        } else {
            var minH = Math.min.apply(null, hArr);
            var minHIndex = $.inArray(minH, hArr);

            hArr[minHIndex] += box.outerHeight();
            moveBox(box, minHIndex * w, minH);
        }
    });
}

//移动盒子到正确的位置
function moveBox(box, left, top) {
    box.animate({
        "top": top,
        "left": left,
        "margin": 0
    }, 2000);
}

//判断是否可以加载数据
function checkScrollSlide() {
    var lastBox = $("#main>div").last();
    var lastBoxH = lastBox.offset().top + Math.floor(lastBox.outerHeight() / 2);

    var scrollTop = $(window).scrollTop();
    var dh = $(window).height();
    return lastBoxH < scrollTop + dh;
}

下面还有另外一种 “带分散效果的瀑布流”，上面提到的“分散”是同时“分散”摆放到正确的位置，下面则是一张一张摆放到正确的位置。

加载数据时也类似同样的效果。

scriptExec2.js

/**
 * Created by DreamBoy on 2016/2/5.
 */
/* 带有分散效果的瀑布流*/

var ww, wh, boxs;
var hArr = []; //存储每列的高度
$(window).on("load", function() {
    ww = $(window).width(); //窗口宽度
    wh = $(window).height(); //窗口高度
    boxs = $("#main>div");


    var boxsArr = jQtoArray(boxs);
    initBoxsPos(boxsArr);

    hArr[0] = boxsArr[0].outerHeight();
    waterfall(boxsArr);


    var dataInt = {"data" : [
        {"src":"1.jpg"},{"src":"7.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}
    ]};


    // 存在问题：加载数据后，数据块不是按我们设想的方式摆放，即数据块没有按最低高度的列优先加入的方式，但是不影响结果的摆放（至少看起来“正常”）
    // 原因可能是因为 动画 + 动态加入数据DOM树渲染的原因。
    $(window).on("scroll", function() {
        var boxArr = [];
        if(checkScrollSlide()) {

            $.each(dataInt.data, function(key, value) {
                $box = $("<div>").addClass("box");
                $pic = $("<div>").addClass("pic").appendTo($box);
                $img = $("<img>").attr("src", "images/" + value.src).appendTo($pic);

                boxArr.push($box);

                $box.appendTo($("#main"));
            });

            initBoxsPos(boxArr);
            waterfall(boxArr);
        }
    });

    /*$(window).on("resize", function() {
     boxs = $("#main>div");
     var boxsArr = jQtoArray(boxs);

     hArr = [];
     for(var i = 0; i < boxsArr.length; i++) {
     boxsArr[i].removeAttr("style");
     boxsArr[i].css("position", "absolute");
     }

     initBoxsPos(boxsArr);
     waterfall(boxsArr);
     });*/
});

// 将遍历得到的jQuery对象转为数组存储
function jQtoArray(jq) {
    var boxsArr = [];
    for(var i = 0; i < jq.length; i++) {
        boxsArr[i] = jq.eq(i);
    }
    return boxsArr;
}

//初始化盒子的位置
function initBoxsPos(newBoxs) {
    //设置初始盒子的位置
    $.each(newBoxs, function(index) {
        setBoxPos(newBoxs[index]);
    });
}

// obj —— jQuery对象
function setBoxPos(newBox) {
    var margin_left = Math.floor(- newBox.outerWidth() / 2 + ((Math.random() * 10) < 5 ? -1 : 1) * (Math.random() * 200));
    var margin_top = Math.floor(- newBox.outerHeight() / 2 + ((Math.random() * 10) < 5 ? -1 : 1) * (Math.random() * 200));

    newBox.css({
        "position": "absolute",
        "top": wh + $(window).scrollTop(),
        "left": ww / 2,
        "margin-left": margin_left,
        "margin-top": margin_top
    });
}

var w, cols;
//将所有 newBoxs 新盒子“放好”
function waterfall(newBoxs) {
    w = newBoxs[0].outerWidth(); //盒子的宽度
    //计算列数
    cols = Math.floor(ww/w);

    if(hArr.length == 1) {
        moveBox(newBoxs, 0, 0, 0);
    } else {
        var box = newBoxs[0];
        var minH = Math.min.apply(null, hArr);
        var minHIndex = $.inArray(minH, hArr);
        hArr[minHIndex] += box.outerHeight();

        moveBox(newBoxs, 0, minHIndex * w, minH);
    }
}

//移动盒子到正确的位置
function moveBox(newBoxs, index, left, top) {
    if(index < newBoxs.length) {

        newBoxs[index].animate({
            "top": top,
            "left": left,
            "margin": 0
        }, 200, function() {

            index = index + 1;
            if(index >= newBoxs.length) {
                return;
            }

            // 求下一个盒子的正确位置
            var box = newBoxs[index];
            var h = box.outerHeight();
            if(index < cols && hArr.length < cols) {  //hArr.length < cols 条件是为了区分后续的数据加载，表明已经有一行排在第1行了。
                hArr[index] = h;

                //移动第1行盒子到正确的位置
                moveBox(newBoxs, index, index * w, 0);
            } else {
                var minH = Math.min.apply(null, hArr);
                var minHIndex = $.inArray(minH, hArr);

                hArr[minHIndex] += h;
                moveBox(newBoxs, index, minHIndex * w, minH);
            }
        });
    }
}

//判断是否可以加载数据
function checkScrollSlide() {
    var lastBox = $("#main>div").last();
    var lastBoxH = lastBox.offset().top + Math.floor(lastBox.outerHeight() / 2);

    var scrollTop = $(window).scrollTop();
    var dh = $(window).height();
    return lastBoxH < scrollTop + dh;
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

带有分散效果的瀑布流（jQuery实现）的相关文章

Android-Google自己的下拉刷新组件SwipeRefreshLayout

感谢原文作者 xff1a http stormzhang github io android 2014 03 29 android swiperefreshlayout API doc xff1a http developer androi
SwipeRefreshLayout和ListView的EmptyView共存冲突的问题

转载自 xff1a 点击打开链接 SwipeRefreshLayout是android官方的下拉刷新控件 xff1b 它内部有且只能有一个子控件 xff1b 当一个ListView嵌入到它内部时 xff0c 就不能为ListView带一个E
MySQL的触发器创建之注意事项（有关delimiter）

今天晚上在自己的数据库上做了一个触发器由于自己之前是使用SQL Server2005学习SQL语句的 xff0c 所以在这个简单的触发器设计出现了一些自己意想不到的BUG 现在我来简单的说一下 xff1a 这里使用到 diary表 com
使用CSS将图片转换成黑白(灰色、置灰)

转载请注明来自张鑫旭鑫空间鑫生活 http www zhangxinxu com http www zhangxinxu com wordpress p 61 2547 可能早就知道 xff0c 像汶川这种糟糕的日子网站全灰在IE下是
CSS中常用的四种选择器

Css中常用的四种选择器 1 类选择器 xff08 class 选择器 xff09 基本使用 xff1a 类选择器属性名属性值案例 xff1a 类选择器 s1 background color pink font weight bol
Apache的下载安装（主要说的 64位）及问题

今天重装完win10系统 xff0c 就重新下载安装 Apache 虽说之前有安装过Apache xff08 原来系统是win7 64位 xff09 xff0c 也成功运行过Apache服务器 xff0c 但是让我重新下载安装 xff0c
使用PHP实现文件下载

这里写了如何使用PHP实现文件下载的程序 xff0c 主要是为了方便自己查找 xff0c 也为了方便大家查阅学习 xff08 当然网上也有其他类似的代码 xff09 其中详细解析看原程序注释 PHP实现文件下载程序 xff1a FileDo
向Web站点发送GET请求、POST请求，并从Web站点取得响应

建议在查看以下代码之前 xff0c 先去了解有关HTTP请求和HTTP响应的相关知识 xff08 如请求与响应的内容 xff09 这里提供了一个发送GET POST请求的工具类 xff0c 源代码摘抄自疯狂 Android讲义 xff08
使用PHP进行图片的copy

今天学习了PHP的文件编程 xff0c 其中PHP自身提供了复制文件的函数 xff08 copy xff09 自己也写了一个功能差不多的复制图片的函数 xff0c 以此在这里记录一下在说该函数之前 xff0c 先介绍一下使用PHP创建删
使用PHP实现文件上传

这里使用PHP实现文件的上传 xff0c 由在浏览器这边选择文件 xff0c 上传到服务器其中 xff0c 在上传文件中 xff0c 考虑到对上传文件大小的限制类型限制等问题 xff08 当然可以根据我们需要修改对上传的文件的限制 xf
电子爱好者必备，强烈推荐这些常用工具

工欲善其事 xff0c 必先利其器 xff01 要想 DIY xff0c 工具同样重要 xff01 下面按照工具的必须程度从初学者至发烧友逐级提出建议 xff0c 供大家参考 xff01 首先明确一点 xff1a 本配置是针对电子类
php中的绘图技术

在php中 xff0c 使用php绘图 xff0c 在访问php文件时可以出现我们绘制的图像 php绘图技术可以应用于报表的开发验证码的设计在介绍php绘图技术之前 xff0c 我们首先需要了解一下php中的绘图坐标系 xff1a ph
jpgraph绘图库的安装与配置

以前用 PHP作图时必须要掌握复杂抽象的画图函数 xff0c 或者借助一些网上下载的画柱形图饼形图的类来实现没有一个统一的chart类来实现图表的快速开发现在我们有了一个新的选择 xff1a JpGraph 专门提供图表的类库它使
图像的灰度变换——图像旋转、图像的反色处理、对比度拉伸

这次我们要处理的是对图像进行旋转操作 xff0c 具体要求 xff0c 如下 xff1a 自定义一个图像的仿射变换函数 xff0c 用于旋转给定的输入图像 xff0c 该函数的输入参数包括处理前的图像和旋转角度输入的角度为正数 xff
Android+PHP 使用HttpClient提交POST的请求，使用JSON解析响应

这里介绍一下如何让自己的Android程序具有联网功能当然首先要有一台服务器 xff0c 如果只是进行测试的话 xff0c 可以使用局域网代替 xff08 手机连电脑wifi xff09 要求电脑已配置好Apache 43 PHP环境下
Android Google开源库——Volley的简单使用

介绍一下Android Google开源库 Volley的简单使用 volley 项目地址 https github com smanikandan14 Volley demo JSON xff0c 图像等的异步下载 xff1b 网络请求的
Mysql远程登陆及常用命令

上次我们租用了阿里云的服务器 xff0c 使用windows系统 xff0c 在其服务器上安装了wamp xff0c 对于Mysql数据库这方面的远程登陆知识有些缺欠 Mysql数据库的远程登陆可使我们在自己电脑上连接服务器的数据库 xff
让网页装进Android手机（将html+css+js打包成Android应用）（简单的）

今晚尝试了一下 xff0c 将自己简单写的网页 xff08 html 43 css 43 js xff09 打包成Android应用装进手机 xff08 当然如果网页做得好的话 xff0c 采用响应式布局 xff0c 即可在手机上完美展示
图像的直方图均衡化和比特平面分层

xff08 1 xff09 自定义一个函数 xff0c 当输入为一幅图像 EXP3 1 tif 时 xff0c 能输出该图像的直方图计算输入图像的直方图 getHist function H 61 getHist pho ima 61 i
空间域滤波：图像平滑和锐化

xff08 1 xff09 自定义一个空间域平滑滤波函数 xff0c 以达到滤除指定类型噪声如高斯噪声和椒盐噪声等的目的 xff0c 该函数的输入参数包括滤波器类型filter type 如高斯均值滤波中值滤波最大小值滤波等

随机推荐

图像的频率域高斯低通滤波

xff08 1 xff09 自定义一个图像的频率域高斯低通滤波处理函数 xff0c 要求该函数的输入参数包括处理前的图像ima和距频率矩形中心的距离D0 截止频率 xff0c 输出参数为滤波处理后的图像im2 自定义的高斯低通滤波器 xff
2021-07-28_Ubuntu18.04如何关闭Xorg图形界面使用tty纯命令跑程序？

痛点1 xff1a 显卡只有8G xff0c 经常gradient overflow或者CUDA OOM 痛点2 xff1a 主机连接数4k显示器 xff0c 经常系统卡住 xff0c 只有鼠标能动 xff0c 某度知道热心网友说等几分钟试
彩色图像的空间域滤波

xff08 1 xff09 RGB彩色空间向 HSI 彩色空间的转换 xff1a 自定义一个函数 xff0c 实现RGB 彩色空间向 HSI 彩色空间的转换 xff0c 要求该函数的输入参数为RGB彩色图像 xff0c 输出参数为HSI
Android中使用Handler造成内存泄露的分析和解决

转载自 xff1a http www linuxidc com Linux 2013 12 94065 htm 什么是内存泄露 xff1f Java使用有向图机制 xff0c 通过GC自动检查内存中的对象 xff08 什么时候检查由虚拟机决
Java中的Scanner类

转载自 xff1a http bbs itheima com thread 90856 1 1 html http blog sina com cn s blog 7014ad5c01018sov html java util Scanne
第一次了解GitHub，在Windows下使用GitHub

心血来潮看了一下关于版本管理工具Git 要使用GitHub xff08 一个程序员的社区网站 xff0c 基于Git用于托管软件库 xff09 xff0c 个人觉得要先理解Git和GitHub 这里有两个参考网站 xff0c 可以做了解
CSS中的选择器优先级考虑

先来看个例子 xff1a css02 html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt t
CSS中的定位——position属性

CSS定位指的是改变元素在页面中的位置 CSS定位机制 xff1a 普通流 xff1a 元素按照其在HTML中的位置顺序决定排布的过程 xff08 也就是我不对元素进行定位的默认排布 xff09 浮动绝对布局 CSS定位包含的属性有 x
CSS中父div与子div——子div有内容，父div高度却为0？

我们可能在审查网页元素时 xff0c 会发现这样的一种情况 xff1a 案例 HTMLAndCSS html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta
JS动画框架及案例

JS动画效果 xff1a 综合运动框架 move js 1 简单动画 1 1 速度动画 D01 share html 1 2 透明度动画 D02 opacity html 2 缓冲动画 2 1 缓冲动画 D03 speed html 3
Javascript异步编程之setTimeout与setInterval

转载自 xff1a http www cnblogs com tugenhua0707 p 4083475 html utm source 61 tuicool amp utm medium 61 referral Javascript异步
javascript下的瀑布流效果

以下瀑布流效果增加了本地加载数据的功能 xff0c 实际上加载更多的图片应该通过网络进行获取 xff0c 这里只是进行了本地图片传送的模拟目录结构如下 xff1a index html lt DOCTYPE html gt lt html
远程共享文件夹读写数据Software caused connection abort: recv failed和 Invalid payload size: 405

Software caused connection abort recv failed 一般是JAR包版本不对 xff0c 我用得jcifs 1 3 3 jar包错 xff0c 改为jcifs 1 3 17 jar就可以了 span cl
jQuery下的瀑布流效果

使用jQuery制作瀑布流效果 xff0c 这里需要引入jQuery库 index html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset
使用js实现tab选项卡效果

这里提供了一种制作选项卡的思路在制作过程中首先考虑的是html结构 xff0c 元素如何摆放 xff0c 此外通过这样的摆放 xff0c 通过CSS样式是否可以达到我们所要的效果最后通过js进行监听 xff0c 当进行选项卡切换时 xf
使用js实现“别踩白块儿”游戏

界面如下 xff1a 点击开始游戏 xff0c 白格将开始向下移动 xff0c 此后再每一行上开始出现一个黑格 xff0c 对应列上按下对应的键即可消除黑格 xff0c 但不可跨行消除 xff08 即必须先消除最近一行上的黑格
AJAX 跨域请求 - JSONP获取JSON数据

转载自 xff1a 点击打开链接 Asynchronous JavaScript and XML Ajax 是驱动新一代 Web 站点 xff08 流行术语为 Web 2 0 站点 xff09 的关键技术 Ajax 允许在不干扰 Web 应
Ajax的实现和jQuery下的Ajax

什么是Ajax呢 xff1f AJAX即 A synchronous J avascript A nd X ML xff08 异步JavaScript和XML xff09 xff0c 是指一种创建交互式网页应用的网页开发技术 AJAX 61
jQuery下的瀑布流效果（改）

使用 window on 34 resize 34 waterfall 使得瀑布流列数可以动态变化包含加载数据的模拟 useJQ html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt
带有分散效果的瀑布流（jQuery实现）

初始数据集中在窗口底部 xff0c 通过动画移动摆动到正确的位置 xff0c 同样模拟网络加载数据时 xff0c 图片也从窗口底部动画摆放到正确的位置如下图所示 xff0c 这是初始数据移动的过程移动结束后 xff0c 初始数据摆放

带有分散效果的瀑布流（jQuery实现）

带有分散效果的瀑布流（jQuery实现） 的相关文章

随机推荐

热门标签

带有分散效果的瀑布流（jQuery实现）的相关文章