效果如图：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/image.css"/>

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

        <script type="text/javascript" src="js/image.js" ></script>

    </head>

    <body>

        <div class="content">

            <div class="box">

                <div class="img_box"><img src="img/1.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/2.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/3.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/4.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/5.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/6.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/7.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/8.jpg" alt="" /></div>

            </div>

        </div>

    </body>

</html>

css:

* {

    padding:;

    margin:;

}

.content {

    position: relative;

}

.box {

    float: left;

    padding: 12px 0px 0px 10px;

}

.img_box {

    padding: 10px;

    border: solid 1px black;

    border-radius: 10px;

    box-shadow: 5px 5px 5px 2px darkgray;

}

.img_box:hover {

    margin: 12px;

    box-shadow: 3px 3px 3px 3px darkgray;

}

img {

    width: 400px;

}

.toast {

    position: fixed;

    width: 170px;

    height: 50px;

    text-align: center;

    line-height: 50px;

    box-shadow: 5px 5px 5px 2px darkgray;

    border-radius: 20px;

    background: cornflowerblue;

    top: 600px;

    left: 600px;

    color: white;

    font-weight: bold;

    font-size: 20px;

}

js:

$(document).ready(function() {

    window.onload = init; //当图片加载完后

    window.onscroll = sc; //当滚动进度条时

    $(window).resize(init); //当浏览器页面大小改变时

    function sc() {

        //如果屏幕可见高度+滚动高度>=最后一张图片的高度+最后一张图片的一半，那么自动加载

        if(($(window).scrollTop() + document.documentElement.clientHeight) >=

            ($(".box").last().position().top + $(".box").last().outerHeight() / 2)) {

            //加载更多

            for(var i = 1; i < 26; i++) {

                $(".content").append("<div class=\"box\"><div class=\"img_box\"><img src=\"img/" + i + ".jpg\" /></div></div>");

            }

            $("body").append("<div class=\"toast\">加载中……</div>");

            //设置延时自动关闭

            setTimeout(function() {    $(".toast").hide(200);}, 1000)

            init();

        }

    }

    function init() {

        /**

         * 瀑布流图片代码分析

         * 得到第一行图片个数、最短图片位置

         * 个数：总长度/box长度

         */

        //得到屏幕长度

        var clientW = document.body.clientWidth;

        //得到单个box的长度

        var box = $(".box").outerWidth();

        //得到一行的个数

        var count = parseInt(clientW / box);

        //把图片在页面中居中

        $(".content").css({

            marginLeft: (clientW - box * count) / 2

        })

        var start = 0;

        var end = start + count;

        //循环，把个数的高传入数组

        var arr = [];

        $(".box").slice(start, end).each(function() {

            arr.push($(this).outerHeight());

        })

        //循环，每次都要改变最短图片的位置

        $(".box").each(function(n) {

            //得到最短的图片及它所出现的位置，从0开始

            var minHei = Math.min.apply(null, arr);

            var posit = $.inArray(minHei, arr);

            //即将要出现的图片的左边距就是位置*box长度

            var width = posit * box;

            //如果是第一行后面的图片

            if(n >= count) { //如果是除第 一行后的后面几张

                $(this).css({

                    "position": "absolute",

                    "left": width,

                    "top": minHei,

                });

                arr[posit] += $(this).outerHeight();

            }

        })

    }

})

jquery+javaScript完成瀑布流图片页面效果的更多相关文章

  1. jQuery实现AJAX定时刷新局部页面实例

    本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...

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

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

  3. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  4. 元素视差方向移动jQuery插件-类似github 404页面效果

    原文地址:http://www.xuanfengge.com/shake.html 前言: 视差滚动,大家也许并不陌生.但是对于视差方向移动,你是否有见过效果呢?看官请进来瞧瞧~ demo : 轩枫阁 ...

  5. 使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容，决定页面效果，用户在下拉列表框中选择页面将要使用的背景颜色

    查看本章节 查看作业目录 需求说明: 根据在下拉列表框中选择的内容,决定页面效果 用户在下拉列表框中选择页面将 要使用的背景颜色 当用户选择橙色时,页面背景将显示为橙色 实现思路: 用表单 <s ...

  6. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  7. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  8. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  9. Ajax+json+jquery实现无限瀑布流布局

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Windows自带压缩解压工具

    压缩一个文件: 命令行:makecab fileName.txt fileName.zip 鼠标操作:选中文件-->鼠标右键-->Send to-->Compressed (zipp ...

  2. redis 简单应用

    Incr $views = Redis::incr('views'); $article_views = Redis::incr('article:' . $article_id . ':views' ...

  3. Unite洛杉矶峰会精彩回顾:从图形、平台再到VR

    产品质量与工作流程 在Unity的研发过程中,保持创新的步伐与稳定性的平衡一直是一个挑战.Unity曾经向所有的用户承诺:Unity将专注于提升产品的质量并保证Unity版本稳定性的决心. 大会伊始, ...

  4. java中字节流与字符流的区别

    字节流 在I/O类库中,java.io.InputStream和java.io.OutputStream分别表示字节输入流和字节输出流,它们都是抽象类,不能实例化,数据流中的最小单位是字节,所以叫做字 ...

  5. GC

    垃圾回收机制的优点:释放无用的对象所占用的空间.方式:自动回收.手动回收.使用System.gc实际上是调用Runtime.getRuntime().gc()

  6. GIT使用笔记-fatal:multiple stage entries for merged file处理办法

    该错误是在cherry-pick时出现 无法确定冲突原因 分支无法checkout ,reset等等全都失效 在网上给出的解决办法全部都是 rm .git/index git add -A git c ...

  7. 用mac的terminal通过公私钥和ssh登录Linux

    刚开始使用mac,会觉得很难用,在网上找的方法也差强人意,经过自己的实践,找到下面这种方法,很好用,步骤也很简单 1.在mac本的个人目录下创建一个文件夹:.ssh.    在这个文件夹下使用ssh- ...

  8. avalon的表单验证

    表单验证 avalon内置了强大的表单验证功能,它需要结合ms-duplex, ms-validate, ms-rules这个三个指令一起使用. ms-duplex负责监控每个表单元素的输入. ms- ...

  9. Servlet的历史与规范

    http://blog.csdn.net/u010297957/article/details/51498018

  10. Spring与ActiveMQ整合

    Spring提供了对JMS的支持,需要添加Spring支持jms的包,如下: <dependency> <groupId>org.springframework</gro ...