通过瀑布流加深对js的理解

最新推荐文章于 2023-12-09 19:12:23 发布
最新推荐文章于 2023-12-09 19:12:23 发布
阅读量258 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39967349/article/details/79040372
版权
今天只做了一个瀑布流的小功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>底部自动填充对齐jquery瀑布流 - 站长素材</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";color:#333;}
a{text-decoration:none;color:#333;-webkit-transition:color .2s;-moz-transition:color .2s;-o-transition:color .2s;-ms-transition:color .2s;transition:color .2s;}
a:hover{text-decoration:underline;color:#ff7d8e;}
a:focus{outline:none;}
/* brand-list */
.brand-list{width:1020px;margin:15px auto 0 auto;position:relative;}
.brand-list .item{position:absolute;width:202px;background-color:#E3F3FF;border:1px solid #f8f8f8;padding:18px;top:0;left:40%;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.brand-list .hover{box-shadow:0px 1px 8px rgba(200,200,200,.6);background-color:#fff;border-color:#c8c8c8;}
.brand-list .additem{padding:0;width:240px;border:none;}
.brand-list .item h3{font-size:42px;color:#666;font-family:arial;font-size:18px;font-weight:800;line-height:.8;margin-bottom:20px;}
.brand-list .item p{margin-bottom:15px;}
</style>
</head>
<body>

<div class="brand-list" id="brand-waterfall">

    <!-- 循环字母模块 item -->
    <div class="item" id="brand-a">
        <h3>A</h3>
        <p><img src="news_07.jpg" width="204" height="131" /></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">ETUDEHOUSE/爱丽小屋</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">abeeco</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">AFU/阿芙</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">adidas/阿迪达斯</a></p>
    </div>

    <div class="item" id="brand-b">
        <h3>B</h3>
        <p><img src="images/news_27.jpg" width="202" height="151" /></p>
    </div>

    <div class="item" id="brand-c">
        <h3>C</h3>
        <p><img src="images/news_35.jpg" width="202" height="141" />&nbsp;<img src="images/news_37.jpg" width="202" height="202" /></p>
    </div>

    <div class="item" id="brand-d">
        <h3>D</h3>
        <p><a href="http://sc.chinaz.com/" target="_blank">Dr.Jart+Dr.MJDior/迪奥</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">dodo</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Dior/迪奥</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Dove/多芬</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">DHC/蝶翠诗</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Davidoff/大卫杜夫</a></p>
    </div>

    <div class="item" id="brand-e">
        <h3>E</h3>
        <p><a href="http://sc.chinaz.com/" target="_blank">N-Dorphin/恩朵娉</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">OPERA/娥佩兰</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">ELF</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">eos</a></p>
    </div>

    <div class="item" id="brand-f">
        <h3>F</h3>
        <p><a href="http://sc.chinaz.com/" target="_blank">芳草集</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">THEFACESHOP/菲诗小铺</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Fanxishop/凡茜</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">FANCL/芳珂（芳凯尔）</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">VERSACE/范思哲</a></p>
    </div>

    <div class="item" id="brand-g">
        <h3>G</h3>
        <p><a href="http://sc.chinaz.com/" target="_blank">ARDELL/艾黛尔</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">ANNASUI/安娜苏</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">ETUDEHOUSE/爱丽小屋</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">abeeco</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">AFU/阿芙</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">adidas/阿迪达斯</a></p>
    </div>

    <div class="item" id="brand-h">
        <h3>H</h3>
        <p><a href="http://sc.chinaz.com/" target="_blank">LAMER/海蓝之谜</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">BOCOTON/海诺丝丽</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">CO.E/韩伊</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Herbacin/贺本清</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">花瑶花</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">花漾美姬</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">HEY NATURE/韩彩妮</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Hipitch/黑龙堂</a></p>
    </div>

    <div class="item" id="brand-l">
        <h3>L</h3>
        <p><a href="http://sc.chinaz.com/" target="_blank">LAMER/海蓝之谜</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">BOCOTON/海诺丝丽</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">CO.E/韩伊</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">CO.E/韩伊</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">CO.E/韩伊</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Herbacin/贺本清</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">花瑶花</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">花漾美姬</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">HEY NATURE/韩彩妮</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Hipitch/黑龙堂</a></p>
    </div>

    <div class="item" id="brand-m">
        <h3>M</h3>
        <p><a href="http://sc.chinaz.com/" target="_blank">LAMER/海蓝之谜</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">BOCOTON/海诺丝丽</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">CO.E/韩伊</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Herbacin/贺本清</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">花瑶花</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">花漾美姬</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">HEY NATURE/韩彩妮</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Hipitch/黑龙堂</a></p>
    </div>

    <div class="item" id="brand-n">
        <h3>N</h3>
        <p><a href="http://sc.chinaz.com/" target="_blank">LAMER/海蓝之谜</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">LAMER/海蓝之谜</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">LAMER/海蓝之谜</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">BOCOTON/海诺丝丽</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">CO.E/韩伊</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Herbacin/贺本清</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">花瑶花</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">花漾美姬</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">HEY NATURE/韩彩妮</a></p>
        <p><a href="http://sc.chinaz.com/" target="_blank">Hipitch/黑龙堂</a></p>
    </div>

</div>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
    $('#brand-waterfall').waterfall();
});

;(function ($) {
    $.fn.waterfall = function(options) {
        var df = {
            item: '.item',
            margin: 15,
            addfooter: true
        };
        options = $.extend(df, options);
        return this.each(function() {
            var $box = $(this), pos = [],
            _box_width = $box.width(),
            $items = $box.find(options.item),
            _owidth = $items.eq(0).outerWidth() + options.margin,
            _oheight = $items.eq(0).outerHeight() + options.margin,
            _num = Math.floor(_box_width/_owidth);

            (function() {
                var i = 0;
                for (; i < _num; i++) {
                    pos.push([i*_owidth,0]);
                } 
            })();

            $items.each(function() {
                var _this = $(this),
                _temp = 0,
                _height = _this.outerHeight() + options.margin;

                _this.hover(function() {
                    _this.addClass('hover');
                },function() {
                    _this.removeClass('hover');
                });

                for (var j = 0; j < _num; j++) {
                    if(pos[j][1] < pos[_temp][1]){
                        //暂存top值最小那列的index
                        _temp = j;
                    }
                }
                this.style.cssText = 'left:'+pos[_temp][0]+'px; top:'+pos[_temp][1]+'px;';
                //插入后，更新下该列的top值
                pos[_temp][1] = pos[_temp][1] + _height;
            });

            // 计算top值最大的赋给外围div
            (function() {
                var i = 0, tops = [];
                for (; i < _num; i++) {
                    tops.push(pos[i][1]);
                }
                tops.sort(function(a,b) {
                    return a-b;
                });
                $box.height(tops[_num-1]);

                //增加尾部填充div
                if(options.addfooter){
                    addfooter(tops[_num-1]);
                }

            })();

            function addfooter(max) {
                var addfooter = document.createElement('div');
                addfooter.className = 'item additem';
                for (var i = 0; i < _num; i++) {
                    if(max != pos[i][1]){
                        var clone = addfooter.cloneNode(),
                        _height = max - pos[i][1] - options.margin;
                        clone.style.cssText = 'left:'+pos[i][0]+'px; top:'+pos[i][1]+'px; height:'+_height+'px;';
                        $box[0].appendChild(clone);
                    }
                }
            }

        });
    }
})(jQuery);
</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>
大泽是超人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序通过js实现瀑布流布局详解
10-16
主要介绍了微信小程序通过js实现瀑布流布局详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
如何用js实现瀑布流
小R.的博客
04-18 335
今天跟着视频一步一步敲，终于如愿制作出了瀑布流，在此做个总结，方便以后进一步加深对代码的理解和学习。 html代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流--js实现</title> <link...
Vue3瀑布流布局实现
weixin_42390185的博客
12-09 661
使用Vue3、TypeScript，采用hook思想，封装一个瀑布流布局的hook。
深入理解javascript之设计模式
brizer的博客
06-30 4244
设计模式 设计模式是命名、抽象和识别对可重用的面向对象设计有用的的通用设计结构。设计模式确定类和他们的实体、他们的角色和协作、还有他们的责任分配。 每一个设计模式都聚焦于一个面向对象的设计难题或问题。它描述了在其它设计的约束下它能否使用，使用它后的后果和得失。因为我们必须最终实现我们的设计模式，所以每个设计模式都提供了例子，代码来对实现进行阐释. 虽然设计模式被描述为面向对象的设计，它们基于
《前端框架开发技术》HTML+CSS+JavaScript 制作个人简历模板
专注于dreamweaver网页设计制作
08-19 740
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
原生JavaScript实现瀑布流布局
10-23
主要介绍了原生JavaScript实现瀑布流布局的相关资料,需要的朋友可以参考下
原生JS瀑布流布局，无限加载
09-01
原生JS瀑布流布局，无限加载
原生js实现瀑布流效果
10-15
主要为大家详细介绍了原生js实现简单瀑布流效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用JS实现图片展示瀑布流效果(简单实例)
10-21
下面小编就为大家带来一篇使用JS实现图片展示瀑布流效果(简单实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
基于 Spring Cloud 组件构建的分布式服务架构
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar
04-25
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar 【项目技术】 微信小程序开发工具+java后端+mysql 【演示视频-编号：246】 https://pan.quark.cn/s/cb634e7c02b5 【实现功能】 用户信息管理，图书信息管理，图书类型管理，图书留言管理，论坛信息管理等
基于java的-44-17-宠物销售系统-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
Web开发工具和方法课程的学术项目Java、Spring、Hibernate、Angular
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
spring-boot 集成geotools工具包（高分项目）.zip
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
决策树.zip0002
04-25
决策树， 决策树（Decision Tree）是一种常见的数据挖掘算法，它模仿人类决策过程来预测数据。决策树是一种树形结构，它从根节点开始，分支延伸至叶节点，每个内部节点代表了某个特征的测试，而每个叶节点代表了最终的预测结果。
微信小程序瀑布流布局通过js代码实现
06-01
微信小程序瀑布流布局可以通过 JS 代码实现。具体步骤如下： 1. 定义一个数组，存储所有数据。 2. 在 `onLoad` 函数中，调用 `setData` 函数，设置数组中的数据。 3. 在 `onReachBottom` 函数中，动态地加载更多...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值