<!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 class="item" id="brand-o">

            <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>

  </div>

  <!-- 品牌列表 end -->

</div>

<script id="jquery_183" type="text/javascript" class="library" src="./jquery-1.8.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 = [];

                console.log(',,,', pos)

                for (; i < _num; i++) {

                    tops.push(pos[i][1]);

                }

                tops.sort(function(a,b) {

                    return a-b;

                });

                $box.height(tops[_num-1]);

                console.log(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>

jQuery 实现的瀑布流的更多相关文章

  1. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  2. jquery插件实现瀑布流

    jquery插件实现瀑布流<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  3. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Jquery实现图片瀑布流思路-简单版

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  5. jQuery无限载入瀑布流 【转载】

    转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较 ...

  6. 基于jQuery的简易瀑布流实现

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

  8. jquery练习之瀑布流

    最近有空简单学习了下瀑布流,写完后想和大家一起分享下,但我知道我的代码有很多缺陷不足,希望多多包涵.(纯属兴趣非专业学习人士) 众所周知,瀑布流大概分为2种,一种是浮动式的瀑布流,一种是定位式的瀑布流 ...

  9. jquery实现简单瀑布流

    瀑布流这个概念一直不是很理解,看到别人可以实现,自己弄了很久还是不能实现就很纠结.瀑布流这根刺就一直扎在我心里,一次偶然的机会看到别人实现了瀑布流,我想我是不是也应该再继续把这个未完成的任务画一个圆满 ...

随机推荐

  1. Activity中通过标签获取当前Fragment

    初始化完成之后才有数据,否则获取不到 String tag = "android:switcher:"+viewPager.getId()+":"+viewPa ...

  2. matla互相关协方差的计算和理解

    计算相关函数和协方差的MATLAB函数 MATLAB信号处理工具箱提供了计算随机信号相关函数xcorr. 函数xcorr用于计算随机序列自相关和互相关函数.调用格式为: [c,lags]=xcorr( ...

  3. Python 基础字典的增删改查

    # 字典相关的代码## 1.字典的特性:a 字典的无序性: b 数据关联性强 C 键键值对 唯一一个映射数据类型# 字典的键必修二是可哈希的(不可变的数据类型:,字符串,数字的,布尔值,元祖)# 并且 ...

  4. nginx随机模块——ngx_http_random_index_module

    今天我给大家分享一个挺好玩的模块,随机变换网站首页的模块 这个模块他的作用于只有在location中,具体写法如下 只需要在localtion开启这个模块就好了,然后呢我们在/usr/share/ng ...

  5. Nginx相关链接

    nginx+lua实现waf http://blog.oldboyedu.com/nginx-waf/ nginx慕课网 http://coding.imooc.com/class/121.html ...

  6. nodejs环境下配置运行mysql

    首先需要在本地运行node环境   必须在本地安装mysql(可以用xampp里面的) 在node环境下引入mysql模块   命令: npm install node-mysql 运用例子(前提条件 ...

  7. Maven下用MyBatis Generator生成文件

    使用Maven命令用MyBatis Generator生成MyBatis的文件步骤如下: 1.在mop文件内添加plugin <build> <finalName>KenShr ...

  8. cygwin 解压 tar.xz压缩包

    今天第一次接触到Cygwin,啊,不懂Linux,, 解压分为三个步骤. 第一步,进入压缩包所在的文件目录: cd e:\ >(左边会弹出这个符号,我以为后面的解压要在这里写,其实不是,要再按一 ...

  9. js－ 类数组对象

    JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法. 而对于一 ...

  10. Git的小总结

    1.Git的介绍 Git(分布式版本控制系统)是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. 下载地址:https://git-scm.com 2.介绍命令 $ git ...