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 相关文章推荐
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
自定义php类(查找/修改)xml文档
2013/03/26 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
php数组查找函数总结
2014/11/18 PHP
php单一接口的实现方法
2015/06/20 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
JS中的phototype详解
2017/02/04 Javascript
package.json文件配置详解
2017/06/15 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
python处理json数据中的中文
2014/03/06 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
详解Python中where()函数的用法
2018/03/27 Python
如何使用python传入不确定个数参数
2020/02/18 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
结婚保证书
2015/01/16 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS