<!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>
效果图：
相关推荐
**jQuery瀑布流插件详解** 瀑布流布局，也称为Masonry布局，是一种常见的网页布局方式，主要用于图片展示或内容排列，使得页面在不同分辨率的设备上都能呈现出良好的视觉效果。这种布局方式的特点是元素可以自动...
在本案例中，我们将讨论如何使用jQuery与waterfall插件配合，实现一个动态的瀑布流效果。 首先，我们需要了解jQuery的waterfall插件。这是一个专门用于创建瀑布流布局的插件，它可以自动调整元素的位置，以适应不同...
总的来说，JQ瀑布流加载涉及到的技术点包括：jQuery的DOM操作、AJAX请求、JSON数据解析、滚动事件监听以及瀑布流布局算法的实现。通过这些技术的组合，我们可以在网页上实现流畅且美观的瀑布流加载效果，提高用户...
在压缩包中的“Jquery实现瀑布流布局插件”可能是一个已经封装好的jQuery插件，包含了上述的实现逻辑。使用这样的插件可以大大简化开发流程，只需要按照插件的文档配置和调用即可实现瀑布流效果。 总结起来，jQuery...
"jq-waterfall"是一款基于jQuery的瀑布流插件，其核心目标是实现类似Pinterest的图片无限滚动加载效果。该插件响应式设计，能够根据用户设备的屏幕尺寸和方向自动调整布局，确保在各种设备上都能呈现出良好的显示...
在实现瀑布流布局时，通常有两种主要的方法：使用JavaScript原生代码和借助jQuery插件。 首先，让我们来看看JavaScript原生实现瀑布流布局的方式。原生JS实现的优点是灵活性高，能够更好地控制性能，但需要一定的...
瀑布流插件实现 注：需要jquery支持。ie8+，chrome，FF等主流浏览器皆可 ###使用方法： 提取waterfall/public/javascripts/waterfall.js作为插件。 waterfall/views/index.ejs为插件演示的html文件。 插件调用方式：...
总的来说，JQ瀑布流的实现涉及到JavaScript的DOM操作、事件监听以及CSS的布局技巧。通过合理的布局设计和动态计算，可以创建出适应性强、视觉效果良好的瀑布流页面。当然，实际应用中还需要考虑到浏览器兼容性、性能...
这是一款简单实用的类似Masonry瀑布流的jQuery图片网格布局插件。该Masonry瀑布流布局简单易用，它通过imagesloaded来加载图片，并且可以非常方便的动态添加任意数量的图片到网格布局中。
- jQuery Masonry：这是一个广泛使用的瀑布流插件，它能自动调整元素的大小和位置，创建出美观的瀑布流布局。 - Isotope：除了基本的瀑布流功能，Isotope还提供了过滤和排序功能，使得用户可以根据需要筛选和排列...
jQuery Waterfall Plugin是基于JavaScript库jQuery实现的一种瀑布流插件，它能帮助开发者轻松地创建具有这种布局效果的网页。 在jQuery Waterfall Plugin中，主要涉及以下核心知识点： 1. **jQuery库**：jQuery是...
在这个场景中，jQuery被用来实现瀑布流效果，通过插件的形式为开发者提供了方便。 jaliswall.js是jQuery的一个插件，专用于创建响应式的瀑布流布局。它支持手机和电脑端，意味着无论用户使用何种设备，都能保持良好...
5. 使用方法：为了在自己的项目中应用这个瀑布流程序，开发者需要引入Jquery库以及这两个插件，然后按照插件的API文档编写相应的JavaScript代码来初始化和控制瀑布流。同时，需要确保HTML结构符合插件的要求，以便...
这些插件已经实现了瀑布流布局的功能，只需在项目中引入它们并进行配置即可。 5. **初始化布局**： 加载页面时，首先使用jQuery获取所有元素的高度，并根据这些高度调整元素的位置，形成初步的瀑布流布局。可以...
"兼容IE8的响应式网格瀑布流布局jQuery插件"正是一种针对这一需求的解决方案，尤其对于那些需要向后兼容旧版IE浏览器的项目而言，其价值尤为突出。 网格瀑布流布局是一种流行的设计模式，它结合了网格系统和瀑布流...
同时，确保正确引入jQuery库和FlexImages插件，这样就能实现响应式的横向瀑布流图片布局。 总的来说，jQuery响应式横向瀑布流图片布局代码，如FlexImages，为网页设计师提供了一种强大的工具，能够在不同设备上创建...
5. **插件使用**：jQuery有许多现成的插件可以简化瀑布流布局的实现，例如`masonry.js`、`isotope.js`等。这些插件提供了预设的布局算法和事件处理，可以快速构建出瀑布流效果。 6. **无限滚动**：为了实现“无限...
总结来说，jQuery无限滚动加载图片瀑布流技术是结合了jQuery库、瀑布流布局和无限滚动加载的网页设计技巧，通过精心设计的插件，可以轻松地实现在网页上动态加载和展示图片，为用户提供流畅、无阻隔的浏览体验。