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

onestopweb

浏览: 701807 次

最近访客更多访客>>

vincepisces

heishehui

wtomato

hushouhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

境-JS

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

效果图：

demo.rar (34.7 KB)
下载次数: 2

查看图片附件

分享到：

JQ 精简的拖动框 | JQ jQuery插件如何开发

2016-10-04 09:35
浏览 329
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

JS 堆排序

JS 获取iframe高度的静动态方法

JQ 获取图片真实宽高

JQ 省市区的三级联动

JS 仅允许微信客户端打开该页面

JQ 文字无缝滚动效果

JQ 雪花落地的特效

JQ 页面上下左右居中的插件

JQ 判断链接的内容

JS 获取移动终端浏览器版本信息

JS Cookies的设置 读取 删除

JS 禁止轮播的技巧之修改ID名

JQ 图片的懒加载

JQ filter() 过滤函数

JQ 全选和反选和取消

JS 宽松相等和严格相等

JS 严格模式

JS ES6箭头函数

JS 表单验证的15个正则表达式

JQ 元素距离顶部窗口小于0悬浮大于0恢复原来的状态

最近访客更多访客>>

JS Cookies的设置读取删除