JQ 瀑布流的插件

最新推荐文章于 2022-07-09 09:12:30 发布
最新推荐文章于 2022-07-09 09:12:30 发布
阅读量222 收藏
点赞数
分类专栏： 境-JS 文章标签： 瀑布流 瀑布流的插件 JQ瀑布流的插件 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JQ 瀑布流的插件</title>
<link rel="stylesheet" href="base.css" />
<style type="text/css">
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 class="wrapper">
<div class="brand-list">
<div class="brand-bd cle" id="brand-waterfall">
<div class="item">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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>
</div>

<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<script>
$(function(){
	$('#brand-waterfall').waterfall();
});
;(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]){
                        _temp = j;
                    }
                }
                this.style.cssText = 'left:'+pos[_temp][0]+'px; top:'+pos[_temp][1]+'px;';
                pos[_temp][1] = pos[_temp][1] + _height;
            });
            (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]);
                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>

 

效果图：

 

 

 

 

 

 

 

 

iteye_17658
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery瀑布流（一看就懂）
weixin_60659070的博客
10-11 2275
瀑布流可以使用JavaScript实现，今天我把使用jQuery方法实现瀑布流分享出来，供大家参考。 什么是瀑布流？ 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 准备工作： 工具：Visual Studio Code HTMl页面（waterfall.html文件） css文件（waterfall.css文件） js文件（waterfall.js文件） ...
jQuery实现响应式瀑布流效果（jQuery+flex）
觉醒法师的专栏
05-29 2288
瀑布流原理：是一种常见的网页布局方式，它的特点是将内容以多列的形式呈现，每一列的内容高度不固定，根据内容的大小自适应调整，从而形成了像瀑布一样的流动效果。瀑布流的实现原理涉及到数据加载、布局设计、图片加载和响应式设计等方面，需要综合考虑各个方面的因素，以实现高效、流畅、美观的瀑布流效果。目前网上很多技术博文是使用定位完成瀑布流效果的，这里将使用jquery和flex布局来实现响应式瀑布流效果。
JQuery实现瀑布流布局
越陌度阡
08-10 748
分享一个基于JQuery实现的瀑布流布局，效果如下： 实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>基于JQ...............
8款实用的Jquery瀑布流插件
dengjianbin的专栏
07-23 2634
1、网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享，此作品是一款响应式瀑布流布局Jquery插件，网友Null增加了一个屏幕自适应和响应式，响应式就是支持智能手机浏览，效果非常棒，遗憾的是不支持IE9以下版本，所以网友们在演示的时候请使用谷歌、火狐等浏览器。。。 2、网友sole分享23行Jquery代码实现定位瀑布流布局特效 首先非常感谢网友s
jquery 瀑布流插件
qq_25261441的博客
12-13 1063
;(function($){ $.fn.waterFall = function () { var defultes = { gap:15 ,//间距 } defultes = $.extend(defultes); var $this = $(this); var item = $this.children(); // console.log(item); var
jquery瀑布流插件
12-18
自己写的jq瀑布流插件，用法就不详述了，有demo
waterfall:瀑布流插件实现（需要jqeury支持）
06-27
瀑布流插件实现 注：需要jquery支持。ie8+，chrome，FF等主流浏览器皆可 ###使用方法： 提取waterfall/public/javascripts/waterfall.js作为插件。 waterfall/views/index.ejs为插件演示的html文件。 插件调用方式：...
jquery 插件实现瀑布流图片展示实例
12-03
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。 代码： [removed] ...
瀑布流无限加载图片插件jq-waterfall
08-30
插件描述：jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件。演示地址：http://www.jq22.com/jquery-info9336
jQuery实现瀑布流布局详解（PC和移动端）
12-28
瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种：等高等宽、等宽不等高、等高不等宽，接下来我们就最为普遍的等宽不等高形式来作为示例。 我们用百度图片作为范例：   这就是PC端比较常见的瀑布流布局方式，接下来我们审查下元素看看百度图片里面是如何布局： 可以看到，它里面实际是若干个等宽的列容器，通过计算将图片push到不同的容器里。而本文介绍的展示方法是通过定位的方式，虽然最后布局展示的方式不同，但之前的算法都比较类似。 动手 首先我们将如下样式的若干个单元写进body中，并将“box”向左浮动： <div class=box>
JQ 瀑布流
08-13
NULL 博文链接：https://onestopweb.iteye.com/blog/2287430
JQ 用最少代码实现瀑布流布局
06-08
NULL 博文链接：https://onestopweb.iteye.com/blog/2328282
JQ 使用waterfall插件实现瀑布流
08-14
NULL 博文链接：https://onestopweb.iteye.com/blog/2322860
jquery版瀑布流（修改版）
06-26
用jquery实现图片高度不等的瀑布流，并且具有低部footer（也就是设置了瀑布流盒子的高度）。
jQuery实现瀑布流布局
solo_1108的博客
07-04 631
瀑布流布局 瀑布流，又称瀑布流式布局。 是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 布局效果 原理 瀑布流布局要求要进行布置的元素等宽 计算浏览器宽度与元素的宽度之比，得到列数 创建数组，存储每列元素总高度 each遍历循环各个图片，判断是否为第一排，若是，则将元素高度直接加入数组中，若不是，则定位布置到高度最小的一列，同时更新当前列的总高度。 jQuery获取元素宽度 在jQuery中，四种宽度 width()方
jQuery插件使用-瀑布流
w1405720461的博客
07-09 375
jQuery插件的使用-瀑布流插件使用方法
8.jQuery实现瀑布流
qq_44682019的博客
10-14 243
瀑布流是啥 只要你往下滚动，就会一直有内容出现，永远看不完。 实战瀑布流： 基本结构的结构层和表示层 瀑布流布局： js布局，jQuery布局，布局方式比较
jQuery 瀑布流插件
09-10 189
瀑布流布局在目前貌似很火爆，具体的分析、原理、用到的知识等等可以看看以下几位牛人写的东西。 瀑布流布局浅析 浅谈个人在瀑布流网页的实现中遇到的问题和解决方法 折腾:瀑布流布局（基于多栏列表流体布局实现） javascript 瀑布流、各大瀑布流简析与建议 因为自己用jquery比较多，便萌生了把瀑布流做成插件的想法，图片就借用迅雷UED上的那些美图吧。 先看看Demo 把代...
jq 实现 瀑布流
最新发布
06-02
4. 当所有图片加载完成后，使用jQuery的masonry插件来实现瀑布流布局，可以使用方法如下： ```javascript $container.imagesLoaded(function() { $container.masonry({ itemSelector: '.box', isAnimated: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值