Jquery实现图片瀑布流思路-简单版

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

已知BUG:

  1. 像本案例中的刚好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();
});

Jquery实现图片瀑布流思路-简单版的更多相关文章

  1. 基于jQuery 的图片瀑布流实现

    解题思路: 第1步  分析问题:我这边的处理方式是以列为单位.每次滚动条滚到底部,把需要加的新的内容放在高度最小的列.如下图所示 加载后的显示 如果在继续往下滚动.新图片就会在1下边显示,如此类推. ...

  2. jquery制作图片瀑布流点击按钮加载更多内容

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> ...

  3. 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  4. 利用LruCache载入网络图片实现图片瀑布流效果(改进版)

    PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...

  5. 图片瀑布流,so easy!

    什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子: 简单来说,就是有很多图片平铺在页面上,每张图片的宽度相同,但是高度不同,这样错落有致的排列出 n 列的样子很像瀑布,于是就有 ...

  6. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  7. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  9. js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

随机推荐

  1. C/C++面试题

    第一部分:基本概念及其它问答题 1.   关键字static的作用是什么? 这个简单的问题很少有人能回答完全.在C语言中,关键字static有三个明显的作用: 1). 在函数体,一个被声明为静态的变量 ...

  2. Team Formation

    #include <stdio.h> #include <ctype.h> #include <math.h> #include <stack> #in ...

  3. javascript 事件流及应用

    当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定顺序发生该元素的触发 事件,事件传播的顺序叫做事件流 1.事件流的分类: A.冒泡型事件(所有浏览器都支持)   由明确的事件源到最不确定 ...

  4. 纯CSS3技术 加载中

    你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html  <div class="loader">加载中...</div> css: 图( ...

  5. leetcode Climbing Stairs python

    class Solution(object): def climbStairs(self, n): """ :type n: int :rtype: int " ...

  6. Perl的列表和数组

    列表和数组 列表 使用括号包围的元素,括号中的元素使用逗号隔开的是列表. 列表中的元素可以是字符串.数值.undef或它们的混合. 列表中的字符串元素需要使用引号包围. 空列表是括号中什么都没有的列表 ...

  7. jQuery插件之上传文件ajaxfileupload.js源码与使用

    在网页应用中,一般会用到上传文件或者图片什么的到服务器,那么可以用ajaxfileupload.js,但是在使用ajaxfileupload.js时候,当服务器返回的json带有&符号的时候, ...

  8. Creazy Ideas 智能汽车和智能交通

    1.现在无人驾驶靠的是摄像头监测障碍物,计算可行路线(这个结论是看到相关视频中百度无人驾驶测试中大大的摄像头推测的,非确切信息).而非像人一样对客观事物的认知学习得到障碍物的信息,如果能将AI融入进去 ...

  9. javaScript之function定义

    背景知识 函数定义 在javaScript中,function的定义有3种: 1.匿名定义                function(){} 2.非匿名定义                fun ...

  10. Exchange Server 产品路线图 及 补丁下载

    Exchange Server RU listExchange Server and Update Rollup Build Numbers -TechNet Articles -United Sta ...