jQuery图片瀑布流的简单实现代码


Posted in Javascript onMarch 15, 2017

简单版的Jquery实现图片瀑布流思路,供大家参考,具体内容如下

注意:本篇文章基于知道每张图片的实际尺寸的情况下
特点:列数自适应,图片宽度固定

已知BUG:

像本案例中的刚好5张图片循环显示且只有5列的情况下会有问题,解决办法就是给予样式的时候不按顺序,而是先将图片放在top值最低的列

1.预备

1.基础html

<div id="main">
  <div class="img-item"><img src="images/img1.png" data-size="398*636" alt=""></div>
  <div class="img-item"><img src="images/img2.png" data-size="560*381" alt=""></div>
  <div class="img-item"><img src="images/img3.png" data-size="338*537" alt=""></div>
  <div class="img-item"><img src="images/img4.png" data-size="599*507" alt=""></div>
  <div class="img-item"><img src="images/img5.png" data-size="532*535" alt=""></div>
</div>

新建html文件,然后将#main下一层的代码多拷贝几次,毕竟图片多才能体现瀑布流的作用

2.基础css

#main{
  width: 90%;
  background-color: #dab;
  text-align: center;
  margin:0 auto;
  position: relative;
}
img{
  width: 100%;
  box-sizing:border-box;
  box-shadow: 2px 0 3px #ddd,0 2px 3px #ddd;
}
.img-item{
  position: absolute;
  padding: 3px;
  box-sizing:border-box;
  height: auto;
  display: inline-block;
}

2.开始

1.声明

//获取图片列表包裹层
var $main = $('#main');
//获取窗口,用于自适应
var $mainWidth = $(window).width();
//定义图片宽度
var imgWidth = 150;
//可显示的列数
var columnNumber = Math.floor($mainWidth/imgWidth);
//存储top信息
var data = [];
//初始化,比如当前可以显示6列,那么这里就初始化6个空间
for (var i = 0; i < columnNumber; i++) {
  data[i] = 0;
}

2.主体

//
var wall = function() {
  //获取相册图片集合
  var $imgs = $('.img-item');
  //遍历图片集合修改top值
  $.each($imgs, function(index, el) {
    //计算当前列数
    var currColumn = index % columnNumber;

    //获取需要显示的高度
    var size = $('img', el).data('size');
    var height = imgWidth / parseInt(size.split('*')[0]) * parseInt(size.split('*')[1])

    $(el).css({
      width: imgWidth,
      left: currColumn * imgWidth,
      top: data[currColumn]
    });

    //如果需要动画可以使用$(el).animate
    data[currColumn] += height;
    //本来这里只需要+=$(el).height()就可以解决,但是初始化时有些问题未解决
  });
};

3.窗体大小改变事件

$(window).resize(function(event) {
   //重置窗口宽度
   $mainWidth = $(window).width();
   //重置可显示的列数
   columnNumber = Math.floor($mainWidth / imgWidth);
   //动态修改#main相册包裹层的宽度,使整个相册看起来一直居中
   $main.css({
     width: imgWidth * columnNumber
   });
   //重置top信息
   for (var i = 0; i < columnNumber; i++) {
     data[i] = 0;
   }
   wall();
 });

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

Javascript 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
Javascript 命名空间模式
Nov 01 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 #Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 #Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 #Javascript
jQuery动态产生select option下拉列表
Mar 15 #Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 #Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 #Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 #Javascript
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
js与运算符和或运算符的妙用
2014/02/14 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
C语言笔试集
2012/07/24 面试题
新领导上任欢迎词
2014/01/13 职场文书
社会学专业求职信
2014/02/24 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
如何使用python包中的sched事件调度器
2022/04/30 Python