#RunJS# 最少代码的瀑布流实现
今天在 开源中国 上发现了一个很好的瀑布流的例子------#RunJS# 最少代码的瀑布流实现
html5的,看上去很帅气,因为是html5 所以浏览器的支持上应该是会受到影响的,直接把源码粘贴过来了。
<!DOCTYPE html> <html> <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 id="jquery_183" type="text/javascript" class="library" src="jquery-1.9.0.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]);} })();$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]);//增加尾部填充divif(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>
转载于:https://www.cnblogs.com/zhengenru2008/archive/2013/04/10/3011729.html
#RunJS# 最少代码的瀑布流实现相关推荐
- 代码最少的网页瀑布流效果
<!DOCTYPE html> <html><head><meta charset="utf-8"/><title>代码 ...
- 瀑布流代码PHP,JS代码实现瀑布流插件
瀑布流布局中的图片有一个核心特点-等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.本文主要和大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解,对此有 ...
- django模板中使用JQ代码实现瀑布流显示效果
settings中的配置不再详细说明 一.路由代码 from django.contrib import admin from django.conf.urls import url from app ...
- 图片瀑布流Html,真的!!!两行css代码实现瀑布流,html,css最简单的瀑布流实现方式且没有缺点...
两行css如下: .waterfall-container { /*分几列*/ column-count: 2; } .waterfall-item { /*不留白,不知道什么意思可以取消这个样式试试 ...
- html简单弹窗代码_真的!!!两行css代码实现瀑布流,html,css最简单的瀑布流实现方式且没有缺点!...
两行css如下: <style scoped> .waterfall-container {/*分几列*/column-count: 2;}.waterfall-item {/*不留白,不 ...
- 真的!!!两行css代码实现瀑布流,html,css最简单的瀑布流实现方式且没有缺点!...
作者:coder94 https://segmentfault.com/a/1190000017866549 两行css如下: <style scoped> .waterfall-cont ...
- 两行CSS代码实现瀑布流
/*分几列*/ column-count: 3; /*不留白*/ break-inside: avoid; /*列间距,可有可无,默认30px*/ column-gap: 20px; 其他CSS属性自 ...
- 堆糖瀑布流完整解决方案(jQuery)
2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...
- 关于瀑布流的简单实现
实现瀑布流,首先需要数据,这里我们制作一批假数据 安装json-server npm install json-server 使用mock.js随机生成批量数据 npm init npm instal ...
最新文章
- 电子计算机微机调试员,电子计算机(微机)装配调试员国家职业标准
- Python程序设计题解【蓝桥杯官网题库】 DAY3-基础练习
- tmux常用命令(分屏工具)
- vue3 中使用动画技术
- 卡巴斯基6.0的授权文件
- 50.Linux/Unix 系统编程手册(下) -- 虚拟内存操作
- java关键字const_java基础知识(三)java关键字
- wincc7.4安装记录
- 矢量地图质量检查现状与需求分析
- Android 智能聊天机器人demo(类似小爱同学)
- 扫描图片转换成文字怎么转
- 非华为电脑与华为平板、手机(鸿蒙系统)之间实现多屏协同功能
- 跨境电商平台哪个好?——扬帆际海
- ES6代码转换为ES5的代码
- 更改tomcat访问端口()
- CCTV-2《遇见大咖》专访雷军----笔记记录
- 电信网通证实台湾地震影响内地访问国际网站(12月27日) 1
- 分治法解决计算凸包问题
- 动态图表揭秘:“动”的关键——取数
- 仙剑奇侠传三Unity开源实现
热门文章
- Error: 1307. Verify that you have sufficient privileges to modify the security permissions for this
- MacOS 软件版本更新Monterey12.1版之后L2TP无法正常访问内网服务解决方案
- 【金猿人物展】天云数据雷涛:从数据湖到湖仓一体再到数据编织,完成的是燃油车到油电混再到纯电技术的改造...
- CCF历年真题整理【已更新至202104】
- Android开发高级进阶内涵段子APP项目实战视频教程
- 有苦有乐的算法 --- 一个无序数组,如果从小到大排好序,任何一个元素任何一个元素移动索引长度不超过k,实现排序
- Solaris 11中配置基于link的IPMP
- 四、ESP32单片机wifi的AP与STA模式使用
- 扫盲!电影视频版本全方位解析
- 【服务治理】服务注册与发现