<!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. 什么是RDD？

    顾名思义,从字面理解RDD就是 Resillient Distributed Dataset,即弹性分布式数据集. 它是Spark提供的核心抽象. RDD在抽象上来讲是一种抽象的分布式的数据集.它是被 ...

  2. js脚本实现自动上传至github

    概述 如果要进行多次上传,使用git gui也会不方便,所以我总结了一下用npm的simple-git实现自动上传至github的方法.供以后开发时参考,相信对其他人也有用. 前提条件 需要安装nod ...

  3. 【Spark调优】：结合业务场景，优选高性能算子

    聚合操作使用reduceByKey/aggregateByKey替代groupByKey 参见我的这篇博客说明 [Spark调优]:如果实在要shuffle,使用map侧预聚合的算子 内存充足前提下使 ...

  4. 【微服务】.netCore eShopOnContainers 部署实践《二》

    Docker 专业术语介绍 优点:轻量级.可伸缩(灵活性).可靠性.可移植  Container image A package with all of the dependencies and in ...

  5. 机器学习技法笔记：12 Neural Network

    Roadmap Motivation Neural Network Hypothesis Neural Network Learning Optimization and Regularization ...

  6. Python基础入门教程（3）

    人生苦短,我学Pyhton Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于199 ...

  7. Java 10 实战第 1 篇：局部变量类型推断

    现在 Java 9 被遗弃了直接升级到了 Java 10,之前也发过 Java 10 新特性的文章,现在是开始实战 Java 10 的时候了. 今天要实战的是 Java 10 中最重要的特性:局部变量 ...

  8. mongodb4.0.2 复制集主从部署

    介绍 复制集(Replica Sets),是一个基于主/从复制机制的复制功能,进行同一数据的异步同步,从而使多台机器拥有同一数据的都多个副本,由于有自动故障转移和恢复特性,当主库宕机时不需要用户干预的 ...

  9. python(leetcode)-136只出现一次的数字

    给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: 输入: [ ...

  10. BitMap位图与海量数据的理解与应用

    1. Bit Map算法简介 来自于<编程珠玑>.所谓的Bit-map就是用一个bit位来标记某个元素对应的Value, 而Key即是该元素.由于采用了Bit为单位来存储数据,因此在存储空 ...