js自定义瀑布流布局插件


Posted in Javascript onMay 16, 2017

瀑布流布局是网页中经常采用的一种布局方式,其布局有如下特点:

瀑布流布局特点:

(1)图文元素按列排放
(2)列宽一致,但高度不等
(3)布局过程中将优先向高度最小的列补充数据

以下是自定义的一个jQuery瀑布流插件:jquery.myWaterfull.js

(function ($) {
 $.fn.extend({
  myWaterfull: function () {

   var parentWidth = $(this).width(); //获取每行的宽度
   var childItems = $(this).children();
   var childWidth = childItems.width(); //获取每一列的列宽
   var column = 5; //定义每行有多少列
   //计算并设置列与列之间的间隙
   var space = (parentWidth - column * childWidth) / (column - 1);
   //声明一个数组,用来存放第一行中每一列的高度
   var arrHeight = [];

   //对子元素进行排列布局
   $.each(childItems, function (index, item) {
    if (index < column) { //对第一行的列进行排列布局
     $(item).css({
      top: 0,
      left: index * (childWidth + space)
     });
     arrHeight.push($(item).height() + space); //将第一行中的列的高度添加到数组中
    } else {
     //找寻列高最小的那一列
     var minIndex = 0;
     var minValue = arrHeight[minIndex];
     //循环遍历找出最小的列高值
     for (var i = 0; i < arrHeight.length; i++) {
      if (minValue > arrHeight[i]) {
       minValue = arrHeight[i];
       minIndex = i;
      }
     }

     //对余下的子元素挨个排列布局
     $(item).css({
      top: minValue + space,
      left: minIndex * (childWidth + space)
     });

     //更新最小列高
     arrHeight[minIndex] += $(item).height() + space;
    }
   });

   //由于这里是利用定位对子元素进行布局,所以要更新父元素的高度
   //当然也可以利用浮动对子元素进行布局
   var maxHeight = 0;
   for (var i = 0; i < arrHeight.length; i++) {
    if (maxHeight < arrHeight[i]) {
     maxHeight = arrHeight[i];
    }
   }

   //设置父元素的高度
   $(this).height(maxHeight);

  }
 });
})(jQuery);

使用示例:

这里假设一个HTML结构:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>瀑布流案例原始</title>
 <style>
* {
 margin: 0;
 padding: 0;
}

body {
 font-family: Microsoft Yahei;
 background-color: #f5f5f5;
}

.container {
 width: 1200px;
 margin: 0 auto;
 padding-top: 50px;
}

.container > .items {
 position: relative;
}

.container > .items > .item {
 width: 232px;
 position: absolute;
 box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
 overflow: hidden;
}

.container > .items > .item > img {
 width: 100%;
 display: block;
 height: 232px;
}

.container > .items > .item:nth-child(3n) > img {
 width: 100%;
 display: block;
 height: 350px;
}

.container > .items > .item > p {
 margin: 0;
 padding: 10px;
 background: #fff;
}

.container > .btn {
 width: 280px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 background-color: #ccc;
 border-radius: 8px;
 font-size: 24px;
 cursor: pointer;
}

.container > .loading {
 background-color: transparent;
}
</style>
</head>
<body>
<div class="container">
 <div class="items">

 </div>
 <div class="btn loading">正在加载...</div>
</div>

书写脚本文件,这里假设从后台获取子元素的数据,并用artTemplate模板引擎将数据渲染到页面:

<script src="JS/jquery.min.js"></script>
<script src="JS/jquery.myWaterfull.js"></script>
<script src="JS/template.js"></script>

//定义引擎模板
<script id="template" type="text/html">
 {{ each items as item index}}
 <div class="item">
  <img src="{{item.path}}" alt="">
  <p>{{item.text}}</p>
 </div>
 {{/each}}
</script>

//书写脚本
$(function () {
 //根据接口文档,向服务器请求数据
 var page = 1, pageSize = 20;
 //当DOM结构加载完毕,就调用一次render函数
 render();
 function render() {
  $.ajax({
   type: "get",
   url: "php/data.php",
   data: {
    page: page,
    pageSize: pageSize
   },
   beforeSend: function () { //在发送请求前改变按钮的内容
    $(".btn").html("正在加载...").addClass("loading");
   },
   success: function (data) {
    //2.借助模板引擎,渲染数据
    var tplStr = template("template", data);
    $(".items").append(tplStr);
    $(".items").myWaterfull();
    //当加载完成后,改变按钮内容和样式
    $(".btn").html("加载更多").removeClass("loading");
    //当后台数据展示完毕时,向用户提示
    if (data.items.length < pageSize) {
     $(".btn").html("没有更多内容了").addClass("loading");
    }
    //每次响应成功后,将从后台返回的page保存起来
    page = data.page;
   }
  });
 }

 //当点击按钮时,加载下一页数据
 $(".btn").on('click',function () {
  if($(".btn").hasClass("loading")) return false;
  render();
 });

 //当页面滚动到数据底部的时候加载数据
 $(window).on('scroll',function () {
  //判断是否滚动到底部
  var isBottom = ($('.items').height()-($(window).height()-$('.items').offset().top))-$(window).scrollTop();
  if (isBottom <= 200 && !$('.btn').hasClass("loading")) render();
 });


});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
vue开发简单上传图片功能
Jun 30 Javascript
简单实现js点击展开二级菜单功能
May 16 #Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 #Javascript
jQuery实现div跟随鼠标移动
Aug 20 #jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 #jQuery
bootstrap响应式表格实例详解
May 15 #Javascript
VUE多层路由嵌套实现代码
May 15 #Javascript
JavaScript制作简单的框选图表
May 15 #Javascript
You might like
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
python下载文件时显示下载进度的方法
2015/04/02 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Python unittest单元测试框架总结
2018/09/08 Python
Python中按值来获取指定的键
2019/03/04 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
python关于倒排列的知识点总结
2020/10/13 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
大学生学业生涯规划
2014/01/05 职场文书
自荐信的基本格式
2014/02/22 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
加入学生会自荐书
2015/03/05 职场文书
酒店前台岗位职责
2015/04/16 职场文书
学困生转化工作总结
2015/08/13 职场文书
Python四款GUI图形界面库介绍
2022/06/05 Python