jQuery瀑布流技术封装并制作插件

最新推荐文章于 2022-03-13 10:57:22 发布
最新推荐文章于 2022-03-13 10:57:22 发布
阅读量411 收藏
点赞数
分类专栏： 原生js 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzl19910825/article/details/75578214
版权

瀑布流布局,其实是一种绝对定位(absolute)布局.

原理分析:

1.html,css结构 : 子绝父相

<body>

<div class="items">

<div class="item"><img src="#"></div>

<div class="item"><img src="#"></div>

<div class="item"><img src="#"></div>

...

</div>

</body>

2.给每一个子元素进行top,left设置定位

/*需求1:设置原始数据
一排元素个数n : items的宽度/item的宽度 向下取整
间隙margin: (items的宽度-n*item的宽度)/(n+1)
一排元素的总高度集合topArr: 长度为n 元素为对应item的高度 初始值都为margin
需求2:设置第一排dom元素位置
需求2.1:修改topArr里面元素的值
*/
var itemWidth = $( '.item'). width();
var n = Math. floor( $( '.items'). width() / itemWidth);
var margin = ( $( '.items'). width() - n * itemWidth) / ( n + 1);
var topArr = [];
for ( var i = 0; i < n; i++) {
topArr[ i] = margin;
$( '.item'). eq( i). css({
top: topArr[ i],
left: ( margin + itemWidth) * i + margin
});
topArr[ i] += $( '.item'). eq( i). height();
}
/*需求3:判断topArr中最小值及index,依次将后面的item元素放在其后面
需求3.1:每次放置后,修改topArr里面元素的值*/
for ( var i = n; i < $( '.item'). length; i++) {
var minH = Infinity;
var minIndex = - 1;
for ( var j = 0; j < n; j++) {
if ( topArr[ j] < minH) {
minH = topArr[ j];
minIndex = j;
}
}
$( '.item'). eq( i). css({
top: minH,
left: ( margin + itemWidth) * minIndex + margin
});
topArr[ minIndex] += $( '.item'). eq( i). height();
}
/*需求4:设置父容器高度*/
var maxH = - Infinity;
for( var i= 0; i< n; i++){
if( topArr[ i]> maxH){
maxH = topArr[ i];
}
}
$('.items'). height( maxH);
对其进行封装处理并根据jQuery插件机制制作插件
$. fn. extend({
waterfall: function () {
/*this指向调用该函数的jQuery对象 */
var itemWidth = this. children(). width();
var n = Math. floor( this. width() / itemWidth);
var margin = ( this. width() - n * itemWidth) / ( n + 1);
var topArr = [];
for ( var i = 0; i < n; i++) {
topArr[ i] = margin;
this. children(). eq( i). css({
top: topArr[ i],
left: ( margin + itemWidth) * i + margin
});
topArr[ i] += this. children(). eq( i). height();
}
for ( var i = n; i < this. children(). length; i++) {
var minH = Infinity;
var minIndex = - 1;
for ( var j = 0; j < n; j++) {
if ( topArr[ j] < minH) {
minH = topArr[ j];
minIndex = j;
}
}
this. children(). eq( i). css({
top: minH,
left: ( margin + itemWidth) * minIndex + margin
});
topArr[ minIndex] += this. children(). eq( i). height();
}
var maxH = - Infinity;
for( var i= 0; i< n; i++){
if( topArr[ i]> maxH){
maxH = topArr[ i];
}
}
this. height( maxH);
/*返回this,也是jQuery链式编程的逻辑*/
return this;
}
})

$( '.items'). waterfall();
3.添加浏览器缩放事件

$( window). resize( function () {
$( '.items'). waterfall();
});
GoodDaYForus
关注
专栏目录
ios-iOS 瀑布流封装.zip
07-11
功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。
Jquery瀑布流插件使用介绍
10-27
总的来说，这款Jquery瀑布流插件通过封装了瀑布流布局的核心算法和交互处理，使得开发者可以快速地在项目中实现瀑布流效果，而无需从头编写复杂的布局代码。通过调整参数和扩展回调函数，开发者可以根据实际需求进行...
瀑布流封装
甜妹的博客
12-02 394
window.onload = function  () { waterFull('main','box'); // 模拟json数据 var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'}]} window.onscroll = funct
关于瀑布流的封装
蔣金澤
01-31 226
html> head> meta charset="UTF-8"> title>title> style type="text/css"> #cont{margin: 0 auto;position: relative;} .box{float: left;padding: 5px;}
自己封装的瀑布流插件，含最详细注释，简单易懂。
weixin_34409822的博客
02-19 196
基于jquery的插件fn相当于prototype,下面开始封装。 $.fn.waterFall=function (option) { //option 用户传过来的{gap:15} var defaults = {gap:20} //默认值 defaults = $.extend(defaults,optio...
vue瀑布流类封装
休休漠漠
01-19 448
瀑布流效果类封装 前言：瀑布流，随着浏览器滚动，页面小单元逐渐出现，且位置是不规则的出现，常用在商城网站，图片类网站(花瓣网)等，十分美观。 1.瀑布流思路 1.1 确定页面可以分多少栏目 根据主体区域的宽度/第一个小块的宽度，向下取整获取可以分多少栏目 let { items, gap,dom } = this; //gap 间距 动态传入 let oBoxWidth = dom.off...
jQuery瀑布流网页布局特效特效代码
03-20
【jQuery瀑布流网页布局特效】是一种常见的网页设计技术，它以一种类似瀑布倾泻而下的方式展示内容，通常用于图片展示或商品展示等场景。这种布局方式能够有效地利用页面空间，使得网页在不同屏幕尺寸下都有良好的...
jquery瀑布流插件
12-18
**jQuery瀑布流插件详解** 瀑布流布局，也称为Masonry布局，是一种常见的网页布局方式，主要用于图片展示或内容排列，使得页面在不同分辨率的设备上都能呈现出良好的视觉效果。这种布局方式的特点是元素可以自动...
jQuery瀑布流插件Grid-A-Licious.zip
最新发布
11-21
jQuery Grid-A-Licious是一款流行的前端瀑布流布局插件，它基于JavaScript库jQuery，结合CSS和HTML5技术，为网页提供动态、美观的网格展示效果。瀑布流布局，又称Masonry布局，是一种常用于图片或内容展示的设计模式...
jQuery瀑布流插件Grid-A-Licious特效代码
03-20
jQuery瀑布流插件Grid-A-Licious是Web开发中一个实用的工具，主要用于构建美观且具有高度响应性的网页布局。在现代网页设计中，瀑布流布局因其独特的展示方式和优秀的用户体验而备受青睐，它能够让网站内容在不同的...
瀑布流兼容移动端ZeptojQuery插件下拉刷新、上拉加载更多
10-17
瀑布流效果兼容移动端下拉刷新、上拉加载更多 ZeptojQuery插件。内有5中风格可供选择，代码简单易懂
iOS 瀑布流封装
weixin_33961829的博客
03-06 122
代码地址如下：http://www.demodashi.com/demo/12284.html 一、效果预览 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支...
瀑布流-02-手把手教你封装自定义布局
agah91620的博客
09-06 107
概述 对于经常使用的控件或类，通常将其分装为一个单独的类来供外界使用，以此达到事半功倍的效果 由于分装的类不依赖于其他的类，所以若要使用该类，可直接将该类拖进项目文件即可 在进行分装的时候，通常需要用到代理设计模式 代理设计模式 代理设计模式的组成 客户类（通常作为代理） 通常委托这是角色来完成业务逻辑 真实角色 将客户类的业务逻辑转化为方法列表，即代理协议 代理协议...
简单瀑布流封装
antelope_2014的博客
11-30 80
function createLi(){ var oLi=document.createElement('li'); oLi.style.height=parseInt(50+Math.random()*400)+'px'; oLi.style.background='rgb('+rnd(0,255)+','+rnd(0,255)+','+rnd(0,255)+')...
基于jQuery封装一个瀑布流插件
weixin_30763397的博客
09-27 55
/*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this*/ /*$this 拿到的瀑布流容器 中有需要需要去做定位的盒子*/ var $this = $(this); ...
瀑布流 封装组件
weixin_42327537的博客
03-13 370
class Waterfall { constructor(obj) { // 获取内容宽度 this.el = document.querySelector(obj.el).offsetWidth // 获取所有的子元素 this.oItems = document.getElementsByClassName(obj.elChren) // 列数 this.columns = obj.columns // 间距 this.gap = obj.gap this.s.
js瀑布流，简单封装
万花果子的博客
12-19 431
一个很简单的瀑布流加载，当滚动条滚动到底部时自动加载，先代码敬上<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <style> li{ list-style: none; } .pinterest-wrap{
jquery瀑布流
UNDEFINED_AUBE的博客
12-22 459
宽相等高不相等 计算出当前排高度最小的那一个，下面继续放置图片 当当前页面图片内容不够显示的时候要继续加载新的图片
封装自定义瀑布流，实现原理
loveFromLeo的博客
01-21 379
继承UICollectionViewLayout @interface WaterPullLayout : UICollectionViewLayout需要两个数组来保存每个item的属性和每列的总高度@interface WaterPullLayout () { /** * 保存每个item的属性 */ NSMutableArray *_itemAttrib
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值