基于jQuery封装一个瀑布流插件
- /*封装一个瀑布流插件*/
- (function($){
- $.fn.WaterFall = function(){
- /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this*/
- /*$this 拿到的瀑布流容器 中有需要需要去做定位的盒子*/
- var $this = $(this);
- /*拿到容器的宽度*/
- var parentWidth = $this.width();
- /*瀑布流容器当中的item*/
- var items = $this.children();
- /*子容器的宽度*/
- var childWidth = items.width();
- /*多少列*/
- var columnCount = 5;
- /*间距*/
- var space = (parentWidth - childWidth * columnCount)/(columnCount-1);
- /*核心布局代码*/
- /*
- * 1.第一排的盒子 top定位 都是0
- * 2.距离左边的距离 根据当前所属的列 第几列 5 索引 4*宽度+间距
- * 3.计算top的定位 找到最矮的那列 把它追加上去
- * 4.容器是没有高度的 需要计算最高的那列 设置高度
- * 【怎么样实时的记录每一列的高度】 需要有一个记录每一列高度的变量 数组记录五裂的高度
- * */
- var colArray = [];
- /*遍历所有的盒子*/
- $.each(items,function(i,item){
- /*当前盒子*/
- var $item = $(item);
- /*索引是0-4就是五个第一排的盒子*/
- if(i < 5){
- /*初始化数组*/
- colArray[i] = $item.height();
- /*第一排的盒子 定位*/
- $item.css({
- top:0,
- left:i*( childWidth + space )
- });
- }else{
- /*计算定位*/
- /*3.计算top的定位 找到最矮的那列 把它追加上去*/
- var minItem = colArray[0];/*最小的高度*/
- var minIndex = 0;/*最下的那列的索引*/
- for(var j = 0 ; j < colArray.length ; j ++){
- if(minItem > colArray[j]){
- minItem = colArray[j];
- minIndex = j;
- }
- }
- //console.log(minItem);
- /*因为要定位left 需要这列的索引*/
- $item.css({
- top:minItem + space,
- left:minIndex * (childWidth + space)
- });
- /*colArray 高度变了 所以要重新设置*/
- colArray[minIndex] = minItem + space + $item.height();
- }
- });
- /*布局完成在来设置容器的高度*/
- console.log(colArray);
- /* 4.容器是没有高度的 需要计算最高的那列 设置高度*/
- var maxItem = colArray[0];
- for(var i = 0 ; i < colArray.length ; i ++){
- if(maxItem < colArray[i]){
- maxItem = colArray[i];
- }
- }
- $this.height(maxItem);
- }
- })(jQuery);
基于jQuery封装一个瀑布流插件的更多相关文章
- jQuery动态网格瀑布流插件Masonry
Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...
- 利用jQuery来扩展一个瀑布流插件
简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...
- 原生 JS 实现一个瀑布流插件
更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...
- 基于jQuery的简易瀑布流实现
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 基于jQuery 的图片瀑布流实现
解题思路: 第1步 分析问题:我这边的处理方式是以列为单位.每次滚动条滚到底部,把需要加的新的内容放在高度最小的列.如下图所示 加载后的显示 如果在继续往下滚动.新图片就会在1下边显示,如此类推. ...
- vue 写一个瀑布流插件
效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡 新建 vue-water-easy.vue 组件文件 <template> <div class ...
- 自定义基于jquery竖向瀑布流插件
公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- jQuery插件之-瀑布流插件
jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...
随机推荐
- .NET 解决方案 核心库整理
一系列令人敬畏的.NET核心库,工具,框架和软件: https://www.cnblogs.com/weifeng123/p/11039345.html 企业级解决方案收录: https://www ...
- url 传参数时出现中文乱码
1.前端通过 url 传递参数,但是参数又有中文,在下一个页面接受参数的时候中文会乱码 解决方案为: 定义和用法 decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解 ...
- vue向数组中动态添加数据
vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...
- Android 性能测试初探(二)
书接前文 Android 性能测试初探(一).上回大体介绍了下在 android 端的性能测试项,现在我们就细节测试项做一些阐述(包括如何自己 DIY 测试). 首先我们来说说启动时间.关于应用的启动 ...
- py西游公关之模块
Py西游攻关之模块 模块&包(* * * * *) 模块(modue)的概念: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可 ...
- css实现多行文字限制显示&编译失效解决方案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- [luogu2679] 子串 (多维dp)
传送门 Description 有两个仅包含小写英文字母的字符串 A 和 B . 现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来 ...
- 24 Point game
24 Point game 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描述 There is a game which is called 24 Point game ...
- C#带cookie模拟登录百度
#region 同步通过POST方式发送数据 /// <summary> /// 通过POST方式发送数据 /// </summary> /// <param name= ...
- SE955 激光扫描头设置 通过SSI串口进行设置
扫描头是能够进行配置的,使其支持与禁用某些条码类型,设置有两种方式,一种是扫一下相应的设置条码,还有一种是通过SSI(simple serial interface)来设置,以下就讲一下SSI的设置方 ...