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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<title>简单CSS定位瀑布流实现方法</title>

<style type="text/css">

/*

 * @name:

 * @time: 2016-12-07

 * @author: wht

*/

body , html {

    height: 100%;

}

/* basic */

body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; }

body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; }

ul { list-style:none; overflow:hidden; }

img { border:none; }

/* content */

.content {margin:10px auto; }

/* case-list */

.case-list { margin:0 auto; }

.case-list li { display:block; position:absolute;padding:5px 0; border:1px solid #ddd;border-radius:5px; background-color:#fff;}

.case-list li img { display:block;border-radius:5px;margin-left:5px; }

</style>

</head>

<body>

<!-- content -->

<div class="content" id="content">

    <ul class="case-list" id="case-list">

        <li><img src="1.jpg" alt="" /></li>

        <li><img src="2.jpg" alt="" /></li>

        <li><img src="3.jpg" alt="" /></li>

        <li><img src="4.jpg" alt="" /></li>

        <li><img src="5.jpg" alt="" /></li>

        <li><img src="5.jpg" alt="" /></li>

        <li><img src="7.jpg" alt="" /></li>

        <li><img src="8.jpg" alt="" /></li>

        <li><img src="9.jpg" alt="" /></li>

        <li><img src="10.jpg" alt="" /></li>

        <li><img src="11.jpg" alt="" /></li>

        <li><img src="12.jpg" alt="" /></li>

        <li><img src="13.jpg" alt="" /></li>

        <li><img src="14.jpg" alt="" /></li>

        <li><img src="15.jpg" alt="" /></li>

        <li><img src="16.jpg" alt="" /></li>

        <li><img src="17.jpg" alt="" /></li>

        <li><img src="18.jpg" alt="" /></li>

        <li><img src="19.jpg" alt="" /></li>

        <li><img src="20.jpg" alt="" /></li>

    </ul>

</div>

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

<script type="text/javascript">

window.onload = function(){

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

    //console.log(windowW);

    var imgW=$("#case-list li>img").width();

    var hNum=parseInt(windowW/imgW);

    var cases = $("#case-list li");

    var case_h = new Array();

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

        case_h[j] = new Array();

    }

      $.each(cases, function(i){

        var hNum=parseInt(windowW/imgW);

        var m = i%hNum;

        case_h[m].push(cases.eq(i).height());

        var step = Math.floor(i/hNum);

        cases.eq(i).css("left", (imgW + 10)*m+"px");

    //    console.log(step);

        if(!step){

            cases.eq(i).css("top", "0");

        }else{

            var num = 0;

            for(var n = 0; n<step;n++){

                num += case_h[m][n] + 20;

            }

            cases.eq(i).css("top", num+"px"); 

        }

    });

}

</script>

</body>

</html>

简单CSS定位瀑布流实现方法的更多相关文章

  1. thinkPHP实现瀑布流的方法

    thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 时间:2014-11-29来源:www.aspku.com 作者:源码库 文章热度: 131 ℃ 过期已备案域名,注册就能用!终 ...

  2. css布局-瀑布流的实现

    一.基本思路 1.先看最终的效果图: 2.实现原理:通过position:absolute(绝对定位)来定位每一个元素的位置,并且将当前列的高度记录下来方便下一个dom位置的计算 二.代码实现 1.版 ...

  3. 分别用js和css实现瀑布流

    下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现 只要运用到    column-count分列 column-width固 ...

  4. 详解纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  5. 纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  6. CSS001. 纯CSS实现瀑布流（纵向排序）

    通过 Multi-columns 相关的属性 column-count.column-gap 配合 break-inside 来实现瀑布流布局. 首先对包裹图片的盒子增加样式,column-count ...

  7. 用label实现横向瀑布流的方法

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAKxCAIAAAAn+3udAAAKqWlDQ1BJQ0MgUHJvZmlsZQAASImVlg

  8. 通过css 实现“瀑布流”

    .hot_list{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -moz-column-gap:7px; -webk ...

  9. css实现瀑布流

    <style>      .container{           column-width:250px;           -webkit-column-width:250px;   ...

随机推荐

  1. 判断直线与线段相交 POJ 3304 Segments

    题意:在二维平面中,给定一些线段,然后判断在某直线上的投影是否有公共点. 转化,既然是投影,那么就是求是否存在一条直线L和所有的线段都相交. 证明: 下面给出具体的分析:先考虑一个特殊的情况,即n=1 ...

  2. HDU -2670 Girl Love Value

    这道题是刚好装满的背包问题,刚好选取k个,状态转移方程为dp[i][j] = max( dp[i - 1][j], dp[i - 1][j - 1] + Li - Bi(j - 1) ) dp[i][ ...

  3. 《CSS网站布局实录》学习笔记（一）

    今天开始,认真学习前端技术,哈哈哈~~~加油~~~ 推荐这本<CSS网站布局实录>(第2版)给初级入门选手,虽然这本书年代有点久远,不过很经典. 注明一下:这里讲述的CSS均为CSS 2. ...

  4. 大型系统开发sql优化总结（转）

    Problem Description: 1.每个表的结构及主键索引情况 2.每个表的count(*)记录是多少 3.对于创建索引的列,索引的类型是什么?count(distinct indexcol ...

  5. XP系统取消开机硬件检查

    非正常关机后进行磁盘检查,主要用于检查磁盘错误等.非法关机后会丢失一些文件或产生一些文件错误,而硬盘自检恰恰就是来检查这些错误并对之进行必要的修复,此功能如果被关闭,不能进行必要的数据恢复,久而久之会 ...

  6. 以下是jQuery和JavaScript实现相同操作的等价代码。

    选择元素  Javascript代码 1.// jQuery   2.var els = $('.el');   3.  4.// 原生方法   5.var els = document.queryS ...

  7. Java集合类笔试题

    介绍Collection框架的结构 Collection接口是单值存放的最大父接口,可以向其中保存多个单值的数据(所谓单值就是指集合中的每个元素都是一个对象).其子接口主要有:List.Set.Que ...

  8. python3.5文档

    https://docs.python.org/3.5/tutorial/modules.html#packages

  9. GetTextMetrics

    该函数的参数要求是一个TEXTMETRIC结构体的指针 也就是说我们可以定义一个结构类型的变量 将该变量的地址传递进来 通过该函数就能得到当前字体的信息来填充这个结构体 int CXuexi2View ...

  10. Mac下安装MySQL-python

    前提系统中已安装python.mysql数据库: 第一步(终端输入): $ export PATH=$PATH:/usr/local/mysql/bin 第二步(终端输入): $ sudo pip i ...