代码最少的网页瀑布流效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>代码最少的瀑布流实现</title><style>html {_background: url(about:blank);}body {background-color: lightgreen;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-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-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">花瑶花</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></div></div><script id="jquery_183" type="text/javascript" class="library" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.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]);}})();$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>

代码最少的网页瀑布流效果相关推荐

网页瀑布流效果实现的几种方式
前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb i ...
jQuery实现响应式瀑布流效果（jQuery+flex）
瀑布流原理:是一种常见的网页布局方式,它的特点是将内容以多列的形式呈现,每一列的内容高度不固定,根据内容的大小自适应调整,从而形成了像瀑布一样的流动效果. 瀑布流的实现原理涉及到数据加 ...
瀑布流效果，用女神图片用三种方法实现，比在浏览器看过瘾，哈哈哈
第一种方法:采用纯CSS的"多列"属性实现瀑布流用到的一些多列属性: 1. column-count:指定元素的列数 2. column-gap:指定列之间的差距 3. colu ...
vue环境简单实现动态瀑布流效果
vue环境简单实现动态瀑布流效果最近开发项目需要实现动态瀑布流效果,项目本身是vue环境,网上很难找到类似的效果,vue-waterfall插件,懂的都懂.看了源码就知道不符合我项目目前的场景.(列 ...
30个创意出色的非常实用的jquery框架插件-(视觉大背景，瀑布流效果)
jQuery是在网页设计师和开发者最近的热门话题之一.人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放,视频播放等 ...
利用JS实现简单的瀑布流效果
转载:https://www.cnblogs.com/dyx-wx/p/4642637.html 一.瀑布流之准备工作首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话 ...
javascript瀑布流效果
javascript瀑布流效果其实javascript瀑布流前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
wpf 客户端【JDAgent桌面助手】开发详解（三）瀑布流效果实现与UI虚拟化优化大数据显示...
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口圆形菜单... wpf 客 ...
Android UI 之WaterFall瀑布流效果 [复制链接]
2019独角兽企业重金招聘Python工程师标准>>> 所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多 ...

代码最少的网页瀑布流效果

代码最少的网页瀑布流效果相关推荐

最新文章

热门文章