css瀑布流怎么实现,简单CSS定位瀑布流实现方法

简单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; }

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

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

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

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

}

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

}

});

}

thinkPHP实现瀑布流的方法

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

css布局-瀑布流的实现

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

分别用js和css实现瀑布流

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

详解纯css实现瀑布流(multi-column多列及flex布局)

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

纯css实现瀑布流(multi-column多列及flex布局)

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

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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAKxCAIAAAAn+3udAAAKqWlDQ1BJQ0MgUHJvZmlsZQAASImVlg

通过css 实现“瀑布流”

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

css实现瀑布流

用js实现瀑布流的一种简单方法

现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

随机推荐

《.Net 的冰与火之歌》寄雁传书，你必须知道的C#参数知识大盘点

引言 参数,也叫参变量,是一个变量.在方法签名中随处可见,实现了不同方法间对于数据的寄雁传书,基本上充斥在代码的各个角落里.在方法签名或者原型中,方法名称后的括号包含方法的参数及其类型的完整列表.参数 ...

Windows-mysql5.7安装

下载 mysql 5.7.msi 安装 双击mysql.msi,按照提示安装. 安装之后需要注意的问题(重点) 设置mysql环境环境变量(让mysql在cmd中的任何路径下就可以被调用) 鼠标右击计 ...

添加一个txt文件(例如在桌面)，利用后台对文件写入内容

string str = "今天天气好晴朗,处处好风光."; //需要将字符串转化成字节数组 byte[] buffer = Encoding.Default.GetBytes(s ...

USB枚举过程(2)

用bus hound 得到的数据 GET MAX LUN 命令 详见USB_MSC_BlukOnly_v1.0 接下来用到的是UFI  SCSI

IOS网络编程——第三方类库

IOS网络编程——第三方类库 目录 概述 ASIHttpRequest AFNetworking 其他 概述 ASIHttpRequest AFNetworking 其他

Linux下使用NMON监控、分析系统性能 -转载

原帖地址:http://blog.itpub.net/23135684/viewspace-626439/ 谢谢原帖大人 一.下载nmon. 根据CPU的类型选择下载相应的版本:http://nmon ...

centos 6 安装zabbix 3.0

1.安装PHP Zabbix 3.0对PHP的要求最低为5.4,而CentOS6默认为5.3.3,完全不满足要求,故需要利用第三方源,将PHP升级到5.4以上,注意,不支持PHP7 rpm -ivh  ...

ASP.NET WebAPI String 传值问题

如果我们再WebAPI中定义了只有一个string参数的WebAPI函数,如下所示: [HttpPost] public string TrackBill(string str) { return s ...

HDU - 1035

wa了一遍,炸了两遍 (1)迷宫题中的模拟题.只需要简单代码就可以ac.如果程序有问题,最后就会卡死,出现runtime error. (2)边界问题一定要小心,数组是从0开始的,就要考虑r--会不会 ...