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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
javascript包装对象实例分析
Mar 27 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 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
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
php文件缓存方法总结
2016/03/16 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
python的re模块应用实例
2014/09/26 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
使用matplotlib画散点图的方法
2018/05/25 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
法律进企业活动方案
2014/03/04 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
校运会通讯稿
2015/07/18 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技