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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
九种原生js动画效果
Nov 11 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 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
完美解决PHP中文乱码
2009/11/26 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
php将html转为图片的实现方法
2017/05/19 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
python动态性强类型用法实例
2015/05/09 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
社区国庆节活动总结
2015/03/23 职场文书
校长新学期寄语2016
2015/12/04 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js
MySQL三种方式实现递归查询
2022/04/18 MySQL