`

JQ 用最少代码实现瀑布流布局

 
阅读更多
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html{_background:url(about:blank);}
body{ background-color:#fff; color:#333; overflow-x: hidden;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,
button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{ font:12px/1.5 Microsoft YaHei,Tahoma,Helvetica,Arial,simsun}
address,cite,dfn,em,var,i{font-style:normal;}
ul,ol{list-style:none;}
fieldset,img{border:0;}
h1{font-size:18px;}
h2{font-size:14px; font-weight:bold;}
h3{font-size:14px; font-weight:400;}
h4,h5{font-size:12px; font-weight:400;}
input,textarea,button,select{font-size:12px; outline:none; resize:none; color:#333;}
button{cursor: pointer;}
table{border-collapse:collapse;border-spacing:0;}
.clear {clear:both; height:0; font-size:0; line-height:0; overflow:hidden;}
.cle:after, .clearfix:after, .clear_f:after, .cle_float:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.cle, .clearfix, .clear_f, .cle_float{zoom:1}
.fl {float:left;}
.fr {float:right;}

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;}
::selection {background:#ff7d8e; color:#fff;} 


#wrapper{width: 1008px; margin: 15px auto;}
/*品牌列表*/
.brand-list{width: 1100px; overflow: hidden; margin-left: -10px;}
.brand-list .brand-bd{position: relative; margin-left: 10px; margin-top: 5px;}
.brand-list .item{position: absolute; width: 202px; background-color: #f8f8f8; 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-weight: bold; line-height: .8; margin-bottom: 20px;}
.brand-list .item p{margin-bottom: 15px;}
</style>
</head>
<body>
<div id="wrapper">
<!-- 品牌列表开始 -->
  <div class="brand-list">
    <div class="brand-bd cle" id="brand-waterfall">
        <!-- 循环字母模块 item -->
        <div class="item" id="brand-a">
            <h3>A</h3>
            <p><a href="#" target="_blank">ARDELL/艾黛尔</a></p>
            <p><a href="#" target="_blank">ANNASUI/安娜苏</a></p>
            <p><a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a></p>
            <p><a href="#" target="_blank">abeeco</a></p>
            <p><a href="#" target="_blank">AFU/阿芙</a></p>
            <p><a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a></p>
            <p><a href="#" target="_blank">adidas/阿迪达斯</a></p>
        </div>
        <div class="item" id="brand-b">
            <h3>B</h3>
            <p><a href="#" target="_blank">HERBORIST/佰草集</a></p>
            <p><a href="#" target="_blank">BURBERRY/巴宝莉/博柏利</a></p>
            <p><a href="#" target="_blank">BIOTHERM/碧欧泉</a></p>
            <p><a href="#" target="_blank">benefit/贝玲妃</a></p>
            <p><a href="#" target="_blank">Bavii/柏羽</a></p>
            <p><a href="#" target="_blank">PaulSmith/保罗史密夫</a></p>
            <p><a href="#" target="_blank">Bobbi Brown/芭比布朗</a></p>
            <p><a href="#" target="_blank">BVLGARI/宝格丽</a></p>
            <p><a href="#" target="_blank">PURE&MILD/泊美</a></p>
            <p><a href="#" target="_blank">baviphat/芭比菲特</a></p>
            <p><a href="#" target="_blank">Peter Thomas Roth/彼得罗夫</a></p>
            <p><a href="#" target="_blank">BeDOOK/比度克</a></p>
            <p><a href="#" target="_blank">BIODERMA/贝德玛</a></p>
            <p><a href="#" target="_blank">BKBarry-MBlistex/碧唇</a></p>
        </div>
        <div class="item" id="brand-c">
            <h3>C</h3>
            <p><a href="#" target="_blank">Fenix/长生鸟</a></p>
            <p><a href="#" target="_blank">For Beloved One/宠爱之名</a></p>
            <p><a href="#" target="_blank">CHARMZONE/婵真</a></p>
        </div>
        <div class="item" id="brand-d">
            <h3>D</h3>
            <p><a href="#" target="_blank">Dr.Jart+Dr.MJDior/迪奥</a></p>
            <p><a href="#" target="_blank">dodo</a></p>
            <p><a href="#" target="_blank">Dior/迪奥</a></p>
            <p><a href="#" target="_blank">Dove/多芬</a></p>
            <p><a href="#" target="_blank">DHC/蝶翠诗</a></p>
            <p><a href="#" target="_blank">Davidoff/大卫杜夫</a></p>
        </div>
        <div class="item" id="brand-e">
            <h3>E</h3>
            <p><a href="#" target="_blank">N-Dorphin/恩朵娉</a></p>
            <p><a href="#" target="_blank">OPERA/娥佩兰</a></p>
            <p><a href="#" target="_blank">ELF</a></p>
            <p><a href="#" target="_blank">eos</a></p>
        </div>
        <div class="item" id="brand-f">
            <h3>F</h3>
            <p><a href="#" target="_blank">芳草集</a></p>
            <p><a href="#" target="_blank">THEFACESHOP/菲诗小铺</a></p>
            <p><a href="#" target="_blank">Fanxishop/凡茜</a></p>
            <p><a href="#" target="_blank">FANCL/芳珂(芳凯尔)</a></p>
            <p><a href="#" target="_blank">VERSACE/范思哲</a></p>
        </div>
        <div class="item" id="brand-g">
            <h3>G</h3>
            <p><a href="#" target="_blank">ARDELL/艾黛尔</a></p>
            <p><a href="#" target="_blank">ANNASUI/安娜苏</a></p>
            <p><a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a></p>
            <p><a href="#" target="_blank">abeeco</a></p>
            <p><a href="#" target="_blank">AFU/阿芙</a></p>
            <p><a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a></p>
            <p><a href="#" target="_blank">adidas/阿迪达斯</a></p>
        </div>
        <div class="item" id="brand-h">
            <h3>H</h3>
            <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
            <p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p>
            <p><a href="#" target="_blank">CO.E/韩伊</a></p>
            <p><a href="#" target="_blank">Herbacin/贺本清</a></p>
            <p><a href="#" target="_blank">花瑶花</a></p>
            <p><a href="#" target="_blank">花漾美姬</a></p>
            <p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p>
            <p><a href="#" target="_blank">Hipitch/黑龙堂</a></p>
        </div>
        <div class="item" id="brand-l">
            <h3>L</h3>
            <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
            <p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p>
            <p><a href="#" target="_blank">CO.E/韩伊</a></p>
            <p><a href="#" target="_blank">CO.E/韩伊</a></p>
            <p><a href="#" target="_blank">CO.E/韩伊</a></p>
            <p><a href="#" target="_blank">Herbacin/贺本清</a></p>
            <p><a href="#" target="_blank">花瑶花</a></p>
            <p><a href="#" target="_blank">花漾美姬</a></p>
            <p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p>
            <p><a href="#" target="_blank">Hipitch/黑龙堂</a></p>
        </div>
        <div class="item" id="brand-m">
            <h3>M</h3>
            <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
            <p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p>
            <p><a href="#" target="_blank">CO.E/韩伊</a></p>
            <p><a href="#" target="_blank">Herbacin/贺本清</a></p>
            <p><a href="#" target="_blank">花瑶花</a></p>
            <p><a href="#" target="_blank">花漾美姬</a></p>
            <p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p>
            <p><a href="#" target="_blank">Hipitch/黑龙堂</a></p>
        </div>
        <div class="item" id="brand-n">
            <h3>N</h3>
            <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
            <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
            <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
            <p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p>
            <p><a href="#" target="_blank">CO.E/韩伊</a></p>
            <p><a href="#" target="_blank">Herbacin/贺本清</a></p>
            <p><a href="#" target="_blank">花瑶花</a></p>
            <p><a href="#" target="_blank">花漾美姬</a></p>
            <p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p>
            <p><a href="#" target="_blank">Hipitch/黑龙堂</a></p>
        </div>
    </div>
  </div>
  <!-- 品牌列表 end -->
</div>
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<script>
$(function(){
$('#brand-waterfall').waterfall();
});
// 瀑布流插件
// pannysp 2013.4.9
;(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]);
                } 
            })();
            //alert(pos);
            $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]){
                        // alert(pos[j][1]);
                        // alert(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>
</body>
</html>

 

效果图:

 

  

 

 

 

 

  • 大小: 45.5 KB
分享到:
评论

相关推荐

    系统管理 - PowerShell-7.5.0-win-x64.exe离线安装包 - 兼容Win10/Win11的跨平台运维解决方案

    1.【内容概要】 微软官方原版PowerShell 7.5.0 x64离线安装包,集成「三件套」企业级解决方案: [1.1] 智能环境配置脚本(自动修复.NET 6依赖/注册表权限); [1.2] 运维增强组件包(SSH远程管理+日志审计模块); [1.3] 跨平台脚本兼容方案(支持Linux/Windows混合执行); 2.【适用人群】 [2.1] 运维工程师:需批量管理Windows Server集群; [2.2] ​全栈开发者:构建CI/CD自动化流水线; ​ [2.3] 系统管理员:解决PowerShell 5.1模块兼容性问题; [2.4] ​IT培训机构:教学环境快速统一部署; 3.【使用场景】 [3.1] 企业内网部署,离线安装+环境自动初始化,内置AutoDeploy.cmd脚本。 [3.2] 跨平台脚本开发,同时操作Linux/Windows设备,集成OpenSSH Client 8.6。 [3.3] 高危操作防护,防止误执行危险命令,内置SafeMode沙箱模块。 4. 【使用目标】快速

    AUTOSAR以太网状态管理器(EthSM)解析:通信架构、状态机与应用实例

    内容概要:本文深入探讨了AUTOSAR以太网状态管理器(EthSM),涵盖其在AUTOSAR分层架构中的位置、主要职责、架构设计、接口定义及依赖关系,并详述状态机的具体状态、转换规则与事件处理流程。同时提供了详细的通信序列图解,帮助理解初始化及启动闭合通信等关键过程,并介绍了配置参数设置和错误处理方式。 适合人群:具备嵌入式系统或汽车电子背景的研发人员和技术管理人员。 使用场景及目标:适用于理解和设计复杂的车内以太网通信系统,尤其是基于AUTOSAR平台的开发项目。帮助技术人员掌握以太网状态的管理和故障排查方法,提高车载通信系统的可靠性。 阅读建议:由于内容专业性较强,建议读者对AUTOSAR基础知识有一定了解后再行阅读,在实践中逐步掌握各个概念和知识点的应用技巧,特别注意状态切换的实际案例分析。

    特易通国产对讲机TH-UVF9D v1.0中英写频软件

    特易通国产对讲机TH-UVF9D v1.0中英写频软件

    数据库_多线程_结构文档_生成工具_1741868776.zip

    数据结构学习

    信息资源整合及应用服务平台的需求规格说明书-系统架构与功能实现详解

    内容概要:该文档是一份关于‘信息资源整合及应用服务平台’需求规格说明书的详尽描述,涵盖项目的总体介绍、业务分析、系统需求、功能模块需求和部署环境等多个方面。文中明确了项目目标是对异构信息资源进行全面整合,并提供了详细的架构设计,确保用户在统一平台上享受高效的资源配置和服务体验。此外还介绍了平台的关键技术工具如TRSWCM和HyBase的使用,及各子系统间协作流程,强调了信息收集渠道多样化及其智能化管理水平。 适用人群:面向项目建设方(即负责系统建设和部署的组织或团队),相关用户和技术人员。 使用场景及目标:为建设‘信息资源整合及应用服务平台’提供建设指导和功能需求分析,明确项目范围、质量标准及开发任务分工;同时有助于相关人员更好地理解该平台的工作机制和应用场景。其他说明:此需求说明书亦可用于指导平台未来的维护和技术升级工作。 其他说明: 包含对系统管理、登录管理、日志管理等多个模块的详细说明,并对每个模块的功能进行了细致划分与介绍。文档末尾附带需求跟踪矩阵,用来监测各个阶段的任务完成情况和进度管理。

    java-springboot+vue家居日用小百货交易网站实现源码(项目源码-说明文档).zip

    系统基于Spring Boot+Vue.js的B/S架构,采用RESTful API实现前后端解耦,MySQL数据库配合MyBatis-Plus ORM框架构建高性能数据层。通过Spring Boot模块化设计、Vuex状态管理及Element UI组件库,实现开发效率与可维护性双提升,结合数据库索引优化与读写分离机制,保障系统高并发处理能力与扩展性。

    数据结构_算法库_句芒_Morn高效通用处理用途_1741872053.zip

    数据结构学习

    hello-java-maker_JavaInterview_1741864831.zip

    操作系统学习

    算法_数据结构_慕课网_学习代码库_CPP实现用途_1741873499.zip

    数据结构学习

    特易通国产对讲机TH-UV8000D v1.0中英写频软件

    特易通国产对讲机TH-UV8000D v1.0中英写频软件

    数字化为企业节能降碳提供新动能【22页】.pptx

    数字化为企业节能降碳提供新动能【22页】

    动物园异常现象解析:基于游客与员工守则揭示神秘逃脱规则

    内容概要:本文以某动物园的游客守则、员工守则以及海洋馆的特殊告示为主要框架,呈现了一个充满恐怖与诡异色彩的独特故事。故事围绕游客和员工的行为规范展开,通过种种奇怪的规定,揭示了一个超现实的环境,暗示存在某种未知实体'它’的操控或威胁,其中涉及到了诸如幻视、认知错乱等多种异象,并以‘唯一解’的形式设置了谜题等待解答,整个文本充斥着紧张悬疑氛围。 适用人群:适合喜爱恐怖悬疑风格作品的成人读者,尤其是对超自然题材感兴趣的文学爱好者。 使用场景及目标:①营造神秘惊悚感的故事叙述背景,探讨人性与现实感知之间的复杂关系;②提供解谜元素激发思考,吸引受众深入探究背后的真相。目标在于带给人们非同寻常的心理体验的同时,引导他们探索表象背后隐藏的意义,从而更好地理解作者构建这个世界观的核心意图所在。 其他说明:本文不仅是一份简单的守则指南,更是一场沉浸式的心理游戏,通过对细节的精心编排来增强故事的真实性和代入感。同时,文中提及多个关于兔子、白狮子、山羊等角色的信息交织形成了复杂的情节脉络,进一步增加了叙事深度。然而值得注意的是,尽管文章看似提供了逃生指引,但实际上并未给出明确的结局指向,使得每位读者都能根据自己对文本的理解得出不同的答案,这也是此类作品魅力之一。

    基于C语言+STM32开发的人体健康监测装置(检测温度与心率判断健康状态)+源码(毕业设计&课程设计&项目开发)

    基于C语言+STM32开发的人体健康监测装置(检测温度与心率判断健康状态)+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 检测当前的温度与心率,同时通过MPU6050检测老人是否摔倒 将摔倒信息发送给子女 基于C语言+STM32开发的人体健康监测装置(检测温度与心率判断健康状态)+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 检测当前的温度与心率,同时通过MPU6050检测老人是否摔倒 将摔倒信息发送给子女 基于C语言+STM32开发的人体健康监测装置(检测温度与心率判断健康状态)+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 检测当前的温度与心率,同时通过MPU6050检测老人是否摔倒 将摔倒信息发送给子女~

    机器学习入门(线性回归)波士顿房价预测代码

    机器学习入门(线性回归)波士顿房价预测代码

    特易通国产对讲机MD580 v1.0中英写频软件

    特易通国产对讲机MD580 v1.0中英写频软件

    后端开发_Go语言_面试题_学习资源_1741867880.zip

    数据结构学习

    2025年美赛全流程指南

    2025年美赛全流程指南

    数据结构_算法可视化_Unity_教育演示系统_1741873797.zip

    数据结构学习

    嵌入式系统下栈与队列方案的选择以及C语言实现

    内容概要:本文详细探讨了栈和队列这两种重要的线性数据结构在嵌入式系统中的C语言实现。首先介绍了栈和队列的基本概念及其存储结构,并结合实际应用场景讲解了这两种结构的操作实现方法。文章还针对嵌入式系统资源受限的特点对比了顺序栈、链栈、循环队列和链队列这四种常见形式的优点与缺点,重点讨论了在不同情况下哪种实现更适合。具体实现部分提供了详细的代码样例,并强调了性能优化策略,比如通过位运算加速取余操作,从而使得程序不仅符合理论标准还能高效地运行在特定硬件环境之中。 适合人群:嵌入式系统开发者和技术爱好者,尤其是希望深入理解栈与队列原理及其在嵌入式环境下优化策略的人士。 使用场景及目标:该文档可以帮助读者掌握如何基于不同的项目要求(如是否能预估最大容量或存在大量不定长数据等)来决定最适合的具体实现,同时通过动手编写和调试提供的示例代码加深理解栈与队列的工作机制及其在嵌入式编程中的应用场景。 其他说明:除了基础的栈和队列知识,本文件还将带领读者探索更深层次的主题,如内存管理、指针操纵及高效编码技巧等方面的内容。

    汽车电子领域的 AUTOSAR COM Based Transformer 架构分析及其实现细节

    内容概要:这篇文档深入剖析了 AUTOSAR 规范中重要的 COM Based Transformer 组件。首先对 COM Based Transformer 进行简述,并对其架构做了宏观概述;随后从配置层面详细解释它的结构和类之间的相互关系,并对它所涉及的重要类进行了逐项阐述;接着对内部构成、各部分功能以及外部接口做了细致入微的研究,尤其是针对其初始化机制、序列化能力及其反向工作的机理方面展开讨论;最后还展示了其具体操作过程以及状态变化情况,为理解和实施该模块提供了详实的支持。 适合人群:对于从事车载网络通信系统的开发者或研究人员来说非常有价值。 使用场景及目标:旨在帮助工程师们快速掌握 COM Based Transformer 在 AUTOSAR 平台下是如何运作的,进而提升他们构建高性能车载应用程序的能力。 阅读建议:为了能充分理解这篇技术报告的价值,强烈建议那些已经熟悉基本 AUTOSAR 结构的专业技术人员阅读此文。此外,在实际工程项目当中遇到有关此主题的问题之时可以随时查阅文中提到的概念和技术点来寻求解决方法。由于文中涉及到很多具体的接口和参数设定,请在实际开发过程中仔

Global site tag (gtag.js) - Google Analytics