瀑布流布局(jq实现)

参考刘晓帆大神的瀑布流效果自己也写了个希望能给打算写这个效果的朋友一点点思路，也希望朋友们批评指正！

html代码：

<!DOCTYPE html>

<html>

<head>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="script.js"></script>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<div class="z-box">

    <ul>

        <li>

            <h3>1A</h3>

            <a>aa</a>

            <a>aa</a>

            <a>aa</a>

        </li>

        <li>

            <h3>2B</h3>

            <a>bb</a>

        </li>

        <li>

            <h3>3C</h3>

            <a>cc</a>

            <a>cc</a>

            <a>cc</a>

            <a>cc</a>

        </li>

        <li>

            <h3>4D</h3>

            <a>dd</a>

            <a>dd</a>

            <a>dd</a>

            <a>dd</a>

            <a>dd</a>

            <a>dd</a>

            <a>dd</a>

        </li>

        <li>

            <h3>5E</h3>

            <a>ee</a>

            <a>ee</a>

            <a>ee</a>

            <a>ee</a>

            <a>ee</a>

        </li>

        <li>

            <h3>6F</h3>

            <a>ff</a>

            <a>ff</a>

            <a>ff</a>

        </li>

        <li>

            <h3>7G</h3>

            <a>GG</a>

            <a>GG</a>

            <a>GG</a>

        </li>

        <li>

            <h3>8E</h3>

            <a>ee</a>

            <a>ee</a>

            <a>ee</a>

            <a>ee</a>

            <a>ee</a>

        </li>

        <li>

            <h3>9F</h3>

            <a>ff</a>

            <a>ff</a>

            <a>ff</a>

        </li>

        <li>

            <h3>10G</h3>

            <a>GG</a>

            <a>GG</a>

            <a>GG</a>

        </li>

    </ul>

</div>

</body>

</html>

css代码：

*{

    margin:0px;

    padding:0px;

    font-size:12px;

}

body{

    background:pink;

}

li{

    list-style:none;

}

.z-box{

    width:300px;

    height:auto;

    box-shadow:0px 0px 1px red;

    margin:0 auto;

    position:relative;

}

.z-box ul{

}

.z-box ul li{

    width:44px;

    text-align:center;

    position:absolute;

    background:#f3f3f3;

    top:0px;

    left:40%;

    transition:all 0.5s;

    -webkit-transition:all 0.5s;

    -o-transition:all 0.5s;

    -ms-transition:all 0.5s;

    -moz-transition:all 0.5s;

}

.z-box ul li a{

    display:block;

    width:44px;

}

javascript代码：

$(function(){

    var $oLi=$(".z-box > ul li");    //jq对象

    var dWidth=$(".z-box").outerWidth();

    var lWidth=$oLi.outerWidth()+5;    //li的宽度+间距

    var col=Math.round(dWidth/(lWidth+10));    //列数+间距

    console.log(col);

    var array=[];    //存放列坐标的数组

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

        array.push([i*lWidth,0]);    //初始化列的坐标

    }

    $oLi.each(function(){    //遍历每一个单位

        var _temp=0;    //最低列暂存体

        var _height=$(this).outerHeight();    //获取当前单位的高度

        for(var j=0;j<col;j++){

            if(array[j][1]<array[_temp][1]){

                _temp=j;    //比较哪列是最低索引

            }

        }

        $(this).css({"left":array[_temp][0]+"px","top":array[_temp][1]+"px"});    //设置单位的坐标

        array[_temp][1] = array[_temp][1] + _height+5;    //计算列的最低坐标

    });    

    //获取最高top

    var nLi=[],

        n=0,

          max=0,

        nHeight;

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

        if(array[i][1]>array[n][1]){

            n=i;

            max=array[i][1]-5;

        }

    }

    for(var j=0;j<col;j++){

        if(array[j][1]>array[n][1]){

            n=j;

            $(".z-box").css("height",array[j][1]-5+"px");

            console.log("min="+j);

        }else{

            nHeight=max-array[j][1];

            nLi[j]=document.createElement("li");

            $(nLi[j]).css("height",nHeight);

            $(nLi[j]).css({"left":array[j][0]+"px","top":array[j][1]+"px"});

            $(".z-box > ul").append(nLi[j]);

            console.log("max="+j);

        }

    }

});

瀑布流布局(jq实现)的更多相关文章

纯css瀑布流布局
由于公司的项目需要才用到瀑布流布局因为后台返回的json直接循环出来的,所以不能做左右浮动的那种,所以才用到了瀑布流布局 16年之前的瀑布流布局基本都时基于js或者直接用jq插件的,但是随着技术的进 ...
JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
jquery实现简单瀑布流布局（续）：图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
jquery实现简单瀑布流布局
jquery实现简单瀑布流布局是开头都会说的原理瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
JavaScript——基本的瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
flexbox实现不等宽不等高的瀑布流布局
第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...
通过Measure & Arrange实现UWP瀑布流布局
简介在以XAML为主的控件布局体系中,有用于完成布局的核心步骤,分别是measure和arrange.继承体系中由UIElement类提供Measure和Arrange方法,并由其子类Framewo ...

随机推荐

项目总结[2]_svg+ajax+webservice+pSpace sdk实现实时数据的web展示
1.使用svg实现组态画面和动态数据展示通过js的定时器调用webservice方法获取数据后更新节点数据 /// <summary>启动定时刷新</summary> fun ...
XML 详解
import urllib import requests from xml.etree import ElementTree as ET root = ET.XML(open('D:\E\seman ...
LeetCode 7 Reverse Integer int:2147483647-2147483648 难度:2
https://leetcode.com/problems/reverse-integer/ class Solution { public: int inf = ~0u >> 1; in ...
转别人的 STM32外部中断使用注意事项
前言:这些问题都是我之前在工作中遇到的,后来觉得需要总结,自己记忆不好,所以在这个给自己打个mark. 一:触发方式 STM32 的外部中断是通过边沿来触发的,不支持电平触发: 二:外部中断分组 ST ...
mysql TIMESTAMP 设置为可NULL字段
今天遇到问题是mysql新建表的时候TIMESTAMP 类型的字段默认是NOT NULL 然后上网查了一下发现很多都说就是不能为NULL的这都什么心态其实设置为空很简单只要在字段后面加上 ...
UIControl
//当遇到button上添加图片,不显示图片,而显示蓝色,解决方案 //1.button的类型,改成UIButtonTypeCustom //2.button的set使用setBackgroundIm ...
java 中关于synchronized的通常用法
package j2se.thread.test; /*** * synchronized(class)很特别,它会让另一个线程在任何需要获取class做为monitor的地方等待． * class与 ...
【转】MyEclipse开发Web项目发布到Tomcat下的Root目录
通常情况下,Web项目是发布到Tomcat下的webapps文件目录下的 .以至于我们访问的时候: 例如:Web应用项目名称为:webManager,则部署到tomcat后,是部署在tomcat/we ...
python中转义用法 r''
代码中需要转多个字符,,可以使用 r'' 例子: print(r"'''\\sfd/;fe'lsdfl")
web开发中常用的技术体系
HTML html(HyperText Markup Language)超文本标记语言"超文本"就是指页面内可以包含图片.链接.程序等非文字元素. 超文本标记语言的结构包括&q ...

瀑布流布局(jq实现)

瀑布流布局(jq实现)的更多相关文章

随机推荐

热门专题