效果如图：

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. python写2048小游戏

    #!/usr/bin/env python # coding=utf-8 #******************************************************** # > ...

  2. sublime sublimeCodeIntel插件 配置

    安装完成后, 弹出一个说明 页面, 不用 管 .可到了这里就是没有提示信息, 忽略 配置sublimeCodeIntel的config文件,告诉他我们需要javascript的提示. 法一: 通过su ...

  3. OC的类别(分类)和拓展

    一.分类: 1.适用范围      当你已经封装好了一个类(也可能是系统类.第三方库),不想在改动这个类了,可是随着程序功能的增加需要在类中增加一个方法,这时我们不必修改主类,只需要给你原来的类增加一 ...

  4. Oracle的DML语言必备基础知识

      前提是咱们都已经对常用的数据操纵语言非常熟悉了,对标准SQL: SELECT子句                --指定查询结果集的列 DROM子句                 --指定查询来 ...

  5. Oracle之nclob类型

    此类型会严重影响查询效率,请少用: nclob字段在查询结果中显示为<NCLOB>,查看nclob类型的值方法有两种 a.可点开...查看具体数据 b.选择所有数据,右击复制到Excel, ...

  6. flume 配置

    [root@dtpweb data]#tar -zxvf apache-flume-1.7.0-bin.tar.gz[root@dtpweb conf]# cp flume-env.sh.templa ...

  7. magereverse - Magento数据库表结构

    Magento数据库表结构相当复杂,250多张表包含了非常多的表关联关系,让刚刚接触Magento的开发者来说真的非常头疼.往往是看到一个产品的各种属性分散在非常多的表中,找不到任何办法来取出它们的数 ...

  8. 侣行APP

    本次要做的是团队共同完成一个项目.由队长组织,全体队员一起讨论分析并完成一款APP的需求调研,分析等工作. 1.团队介绍 队长:杨晓帅 队员                               ...

  9. poj 1266 Cover an Arc.

    http://poj.org/problem?id=1266 Cover an Arc. Time Limit: 1000MS   Memory Limit: 10000K Total Submiss ...

  10. WebApi 通过类名获取类并实例化

    环境:Web Api 返回值类型为DTO实体,继承基类DTO---BaseResultDto public class BaseResultDto { /// <summary> /// ...