最近有空简单学习了下瀑布流，写完后想和大家一起分享下，但我知道我的代码有很多缺陷不足，希望多多包涵。（纯属兴趣非专业学习人士）

众所周知，瀑布流大概分为2种，一种是浮动式的瀑布流，一种是定位式的瀑布流，后者要稍微难于前者，但思维上大同小异。话不多说先上效果图。

1.首先浮动式的瀑布流，这个较简单，需要注意的是对追加图片列的UL的高度的比较，下面为代码

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>浮动瀑布流</title>

<style type="text/css">

* {padding: 0px;margin: 0px;}

#box {width: 1000px;margin:50px auto;background:black;}

#box ul {float: left;width: 230px;margin: 10px;list-style-type:none;}

#box ul li img {width: 230px;}

</style>

</head>

<body>

    <div id="box">

        <ul></ul>

        <ul></ul>

        <ul></ul>

        <ul></ul>

    </div>

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

<script type="text/javascript">

function checkHeight(OUL){

            var height=Infinity;

            var Index=0;

            for (var a = 0; a < OUL.length; a++) {

                var now_height=OUL[a].offsetHeight;

                if (now_height<height) {

                    height=now_height;

                    Index=a;

                };

            };

            return Index;

        }

function CreateIMage(){

            var Obx=document.getElementById('box')

            var OUL=Obx.getElementsByTagName('ul');

        for (var i = 2; i < 13; i++) {

            var IMG=new Image();

            IMG.src="data:images/"+i+".jpg";

             var Oli=document.createElement('li');

            Oli.append(IMG);

            var min_index = checkHeight(OUL);

            OUL[min_index].append(Oli);

        };};

    $(function(){

        CreateIMage();

        window.onscroll = function(){

            var ST = document.documentElement.scrollTop || document.body.scrollTop;

            var vH = document.documentElement.clientHeight;

            if (ST+vH>document.body.scrollHeight*0.8) {

                CreateIMage();

            };

        }

    });

</script>

</body>

</html>

2。定位式的瀑布流，这个和浮动式的差不多，需要注意的是对追加div的定位，而定位的重点是div的top和left的获取，下面为代码：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>定位瀑布流</title>

     <style type="text/css">

     * {padding: 0px;margin: 0px;}

     #box {margin: 50px auto;position: relative;}

     </style>

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

 </head>

 <body>

     <div id="box">

     </div>

 <script type="text/javascript">

         function getColor(){

     var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";

     var colorArray=colorValue.split(",");

     var _color="#";

     for(var i=0;i<6;i++){

         _color+=colorArray[Math.floor(Math.random()*16)]

         }

         return _color;

     }

         function checkHeight(obj){

             var height=Infinity;

             var index=0;

             for (var a = 0; a < obj.length; a++) {

             var now_height=obj[a];

             if (now_height<height) {

                 height=now_height;

                 index=a;

             };

             };

             return(index);

         };

     $(function(){

         var Obox=document.getElementById('box');

           var VW=$(window).width();

           var Default_width=240;

           var div_num=Math.floor(VW/Default_width)-1;

           //设置box的宽度使其居中

           $("#box").css({"width":Default_width*div_num});

           var arrHeight=[0,0,0,0];

         CreateDiv();

         function CreateDiv(){

           //初始化一个高度数组

           for (var i = 2; i < 13; i++) {

               var oImg=new Image();

               oImg.src="data:images/"+i+".jpg";

               oImg.style.width=230+"px";

               var Odiv=document.createElement("div");

               // Odiv.style.backgroundColor=getColor();

               // Odiv.style.width=230+"px";

               // var t=Math.ceil(Math.random()*150+150);

               // Odiv.style.height=t+"px";

               Odiv.style.position="absolute";

               Odiv.append(oImg);

               var min_index=checkHeight(arrHeight);

               Odiv.style.top=arrHeight[min_index]+"px";

               Odiv.style.left=min_index*Default_width+5+"px";

               Obox.append(Odiv);

               arrHeight[min_index]+=(Odiv.offsetHeight+5);}

           };

         window.onscroll=function(){

             var ST=document.documentElement.scrollTop || document.body.scrollTop;

             var VH=$(window).height();

             if (ST+VH>(document.body.scrollHeight)*0.8){

                 CreateDiv();

             };

         }

     });

 </script>

 </body>

 </html>

jquery练习之瀑布流的更多相关文章

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

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

  2. jquery插件实现瀑布流

    jquery插件实现瀑布流<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

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

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

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

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  5. jQuery无限载入瀑布流 【转载】

    转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较 ...

  6. 基于jQuery的简易瀑布流实现

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

  7. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

  8. jQuery 实现的瀑布流

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

  9. jquery实现简单瀑布流

    瀑布流这个概念一直不是很理解,看到别人可以实现,自己弄了很久还是不能实现就很纠结.瀑布流这根刺就一直扎在我心里,一次偶然的机会看到别人实现了瀑布流,我想我是不是也应该再继续把这个未完成的任务画一个圆满 ...

随机推荐

  1. 树莓派上搭建arduino开发环境

    -------------还是博客园上面的格式看这舒服,不去新浪了------------- 为什么要在树莓派上开发arduino呢?总要把树莓派用起来嘛,不然老吃灰. 树莓派使用SSH时没有图形界面 ...

  2. php处理登录、添加数据、删除数据和修改数据

    php 处理登录 :需要先建一个登录的页面,用form表单就可以很轻松的完成,(这里的示例是我根据数据库现成的表做的 是一个teacher表格 根据老师的工号和姓名登录的) <form acti ...

  3. PhpCms_V9笔记

     一.建立虚拟站点 1.先更改www目录下的站点名称,再找到apache, 打开"Apache2\conf\extra"下的"httpd-vhosts.conf" ...

  4. Ajax原理、优缺点及应用场景

    前言 Ajax的全称为Asynchronous JavaScript And Xml,是一种web客户端与服务器端异步通信的技术,如今,可以说是web开发人员必须掌握的的一项技能了.本文讲述了Ajax ...

  5. NSIndexSet 浅析

    Cocoa 中提供了两个用于维护区间集合的类型:NSIndexSet和NSMutableIndexSet . 这两个类型容易其名字一样,其区别就在于是否可以修改.这个区别和NSArray的一样,NSI ...

  6. Struts2初步接触

      使用idea快速搭建Struts2的Maven项目    首先使用intelij idea部署Maven项目 1.jar包引入 pom.xml 我们用的是阿里云 我用的是最新版的Struts2核心 ...

  7. 从C#到TypeScript - Proxy

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  8. C# 知识回顾 - 装箱与拆箱

    装箱与拆箱 目录 生活中的装箱与拆箱 C# 的装箱与拆箱 值类型和引用类型 装箱 拆箱 生活中的装箱与拆箱    我们习惯了在网上购物,这次你想买本编程书 -- <C 语言从入门到放弃> ...

  9. 前端资讯周报 2.27 - 3.5: 如何设计一个优秀的HTML接口，深入理解line-height

    从本周起,每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章,或者视频教程,又或者图书. 个人认为国外的技术文章质量较高,而且发布的技术资讯也走在行业前沿,所以比较关注 ...

  10. jQuery的动态绑定事件的应用

    注意:bind()的事件绑定是只对当前页面选中的元素有效.如果你想对动态创建的元素bind()事件,是没有办法达到效果的 <script src="jquery-1.11.2.min. ...