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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
Node.js的包详细介绍
Jan 14 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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
PHP实现二维数组去重功能示例
2017/01/12 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
怎么快速自学python
2020/06/22 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
测量实习生自我鉴定
2013/09/19 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
技能比赛获奖感言
2014/02/14 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers