<!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. Java语法基础DayFive

    一.继承 1.格式:class 子类 extends 父类 2.好处:提高代码的复用性:让类与类之间产生了关系,是多态的前提. 3.弊端: (1)类的耦合性增强了,而开发的原则是高内聚,低耦合.内聚是 ...

  2. .NET 日期数据的格式化方法

    .HtmlEncode="False" .DataFormatString="{0:d}" C#格式化日期时间 DateTime dt = DateTime.N ...

  3. python+requests+excel 接口自动化框架

    一.项目框架如图: 1.common :这个包都是一些公共的方法,如:手机号加解密,get/post接口请求的方法封装,接口鉴权,发邮件,读写excel文件方法等等 2.result:存放每次运行的l ...

  4. 十、编写LED混杂设备驱动

    led.c修改为: #include <linux/init.h> #include <linux/module.h> #include <linux/miscdevic ...

  5. 读取文件时，使用file.eof()判断结尾注意事项

    今天写一个小功能需要读取文件,在判断文件结尾时使用了以下语句: while(infile.eof() && infile.good()) { infile.read((); encod ...

  6. Linux下Ganglia集群监控安装、配置笔记

    http://www.blogjava.net/henry14/archive/2011/12/17/ganglia.html 枪声依旧 Linux下Ganglia集群监控安装.配置笔记 Gangli ...

  7. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式

    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...

  8. 24点小游戏app宣传文案

    24点小游戏app宣传文案 游戏背景 24点小游戏是传统的扑克牌游戏,是通过扑克牌来完成的竞争性智力游戏,除了希望能够消磨我们的空闲时间,加强同学们的临机和速算能力,还能够促进我们每个人的大脑和逻辑性 ...

  9. mmap 操作

    mmap 功能描述: mmap将一个文件或者其它对象映射进内存.文件被映射到多个页上,如果文件的大小不是所有页的大小之和,最后一个页不被使用的空间将会清零.munmap执行相反的操作,删除特定地址区域 ...

  10. Gauss error function

    0. error function erf(x)=1π∫−xxe−t2dt" role="presentation">erf(x)=1π−−√∫x−xe−t2dte ...