<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
var arr=[]; //存放每一列的高度
var boxw=$(".box:first").outerWidth(true);
// width本身宽innerWidth width+padding outerWidth() width+padding+border outerWidth(true) width+padding +border+margin
var ww=$(window).width();
var col=Math.floor(ww/boxw);
$("#wrapper").width(col*boxw).css("margin","0 auto");
var pics=["images/37.jpg","images/38.jpg","images/39.jpg","images/40.jpg","images/41.jpg"]
$(window).scroll(function(){
if(isLoad()){
console.log("load...");
$.each(pics,function(i,ele){
var box = $("<div class='box'></div>");
$("<div class='pics'></div>").html('<img src="'+ele+'" />').appendTo(box);
box.appendTo($("#wrapper"));
})
waterWall();
}
})
waterWall();
function waterWall(){
$(".box").each(function(index){
if(index<col){ // 第一行
arr[index]=$(this).outerHeight();
}
else{ //从第二行开始的下标就大于col

var minH = Math.min.apply(null,arr); //找到最小高度的值
var minIndex=$.inArray(minH,arr); // indexOf //找到最小高度的值在数组中的索引
$(this).css({ //定位当前元素
position:'absolute',
//top:minH+"px", //top 设为最小值 minH
left:boxw+"px" //从哪漂过来
}).animate({
left:boxw*minIndex+"px", //关键 left值设为最小值的索引与一个box宽度的积
top:minH+"px" //设这个值会有高度上的动画
})
arr[minIndex]+=$(this).outerHeight();//刷新最小列的高度
}
});
}
function isLoad(){
var pos=$(".box:last").offset().top+Math.floor($(".box:last").outerHeight()/2);
var ws=$(window).height()+$(window).scrollTop();
if(pos<ws){
return true;
}
else{
return false;
}
}
});
</script>
</head>
<body>
<div id="wrapper" style="height:3000px">
<div class="box">
<div class="pics">
<img src="data:images/0.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/11.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/13.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/14.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/15.jpg" alt="">
</div>
</div>
</div>
</body>
</html>

JQuery瀑布流特效（练习）的更多相关文章

  1. jQuery实现无限加载瀑布流特效

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

  2. 网友微笑分享原创Jquery实现瀑布流特效

    首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...

  3. jQuery瀑布流从不同方向加载3种效果演示

    很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...

  4. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  5. jquery瀑布流排列样式代码

    <!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...

  6. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

  7. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

  8. 炫酷的jquery瀑布流

    最近做了一个瀑布流效果,思路很简单 首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重 ...

  9. jQuery瀑布流无限拖三大利器：masonry+imagesloaded+infinitescroll

    瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(ma ...

随机推荐

  1. Android RxJava zip 操作符

    不说话,直接举例 // zip 2 observables Observable.zip(Observable.just(0), Observable.just(0), BiFunction { t1 ...

  2. “全栈2019”Java多线程第三十七章：如何让等待的线程无法被中断

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  3. cad2008 参照面板 在位编辑后无法使用

    有时候在位编辑之后,保存在位编辑了,可是参照面板无法动了,这个时候只要保存一下,然后ctrl+z,就可以解决了..蛮神奇的,我还没想到如何用代码去搞定它..

  4. Tomcat 在 Linux 上的安装和配置

    一.文件上传 先上传tomcat安装文件到Linux服务器 二.解压安装 使用以下命令解压安装包 .tar.gz 解压成功会生成一个文件夹 tomcat服务器运行时是需要JDK支持的,所以必须先安装好 ...

  5. I2C软件调试思路并知识总结

    I2C是一种只使用两根线的串行通信协议.一根线是串行数据线SDA,另外一种是串行时钟线SCL. I²C允许相当大的工作电压范围,但典型的电压准位为+3.3V或+5v. I²C的参考设计使用一个7比特长 ...

  6. LeetCode: 107_Binary Tree Level Order Traversal II | 二叉树自底向上的层次遍历 | Easy

    本题和上题一样同属于层次遍历,不同的是本题从底层往上遍历,如下: 代码如下: struct TreeNode { int val; TreeNode* left; TreeNode* right; T ...

  7. C++Primer笔记之复制控制

    复制控制这一节需要注意的地方不多,主要有以下几点: 1.定义自己的复制构造函数 什么时候需要定义自己的复制构造函数,而不用系统提供的,主要遵循以下的经验说明: 某些类必须对复制对象时发生的事情加以控制 ...

  8. unity2d开发windows phone游戏按钮问题

    今天在进行unity2d项目对windows phone工程的编译过程中,发现了一个很蛋疼的bug,windows phone编译运行后,GUILayout.Button出现自动点击的现象,这带来了很 ...

  9. js 解析url中search时存在中文乱码问题解决方案

    一 问题出现原因 当存在这样一种需求,前端需要通过url中search返回值进行保存使用,但如果search中存在中文解析出来会导致乱码.这个问题我找了很久原因,最后终于知道解决方案,这里和大家分享一 ...

  10. ubuntu18.04 运行时提示缺少libstdc++.so.6

    解决方法:输入命令 sudo apt- 提示:ubuntu默认软件包管理器不是yum,而是dpkg,安装软件时用apt-get PS:在ubuntu下最好不要去装yum,不然可能会出现一些奇怪的问题