<!doctype html>

  <html>

  <head>

  <meta charset="UTF-8"/>

  <title>新手教程：CSS+DIV等宽格子堆砌瀑布流效果_酷站代码丨www.5icool.org</title>

  <style>

  *{padding:0;margin:0;}

  #wrap{position:relative;zoom:1;margin:0px auto;}

  #wrap li{width:250px;float:left;list-style:none;}

  .boxCont{position:relative;margin:15px;border:1px solid #ccc;background:#eee;

  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));

  background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

  background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

  background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

  -webkit-border-radius: 60px / 5px;

  -moz-border-radius: 60px / 5px;

  border-radius:60px / 5px;

  -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;

  -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;

  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;

  }

  .boxCont:before{

  content:'';

  width: 50px;

  height: 50px;

  top:0; right:0;

  position:absolute;

  display: inline-block;

  z-index:-1;

  -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);

  -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);

  box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);

  -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

  -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

  -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

  transform: rotate(2deg) translate(-14px,20px) skew(-20deg);

  }

  .boxCont:after{

  content: '';

  width: 100px;

  height: 100px;

  top:0; left:0;

  position:absolute;

  z-index:-1;

  display: inline-block;

  -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);

  -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);

  box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);

  -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);

  -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);

  -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);

  transform: rotate(2deg) translate(20px,25px) skew(20deg);

  }

  </style>

  </head>

  <body>

  <ul id="wrap"></ul>

  </body>

  <script type="text/javascript">

  var $id = function(o){ return document.getElementById(o) || o};

  function sort(el){

  var h = [];

  var box = el.getElementsByTagName("li");

  var minH = box[0].offsetHeight,

  boxW = box[0].offsetWidth,

  boxH,

  n = document.documentElement.offsetWidth / boxW | 0; //计算页面能排下多少Pin

  el.style.width = n * boxW + "px";

  for(var i = 0; i < box.length; i++) {

  boxh = box[i].offsetHeight; //获取每个Pin的高度

  if(i < n) { //第一行Pin以浮动排列，不需绝对定位

  h[i] = boxh;

  box[i].style.position = '';

  } else {

  minH = Math.min.apply({},h); //取得各列累计高度最低的一列

  minKey = getarraykey(h, minH);

  h[minKey] += boxh ; //加上新高度后更新高度值

  box[i].style.position = 'absolute';

  box[i].style.top = minH + 'px';

  box[i].style.left = (minKey * boxW) + 'px';

  }

  }

  };

  /* 返回数组中某一值的对应项数 */

  function getarraykey(s, v) {

  for(k in s) {

  if(s[k] == v) {

  return k;

  }

  }

  };

  /* 随机创建Pin */

  var pin = '';

  for(i = 0; i < 30; i++) {

  height = Math.floor(Math.random()*200 + 200);

  pin += '<li><div class="boxCont" style="height:' + height + 'px;"></div></li>';

  };

  $id("wrap").innerHTML = pin;

  window.onload = window.onresize = function() {

  sort($id("wrap"));

  };

  </script>

  </html>

css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）的更多相关文章

  1. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  2. css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)

    一.原始的居中方法是把div换成table <div style="width: 500px; height: 200px; border: solid 1px red; text-a ...

  3. CSS 基础 例子 图片拼合技术

    利用background-position xpos ypos 就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片 如: background-position: 15px 20px;( ...

  4. CSS基础 背景图片的相关属性

    属性名: background-size: 宽度 高度; 属性值 说明 数字+px 简单方便,常用 百分比 相当于盒子自身的百分比,如:百分百,就是就算是图片变形也要显示 contain 动比例缩放, ...

  5. css基础语法一（选择器与css导入方式）

    页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所 ...

  6. CSS基础【1】：体验CSS

    CSS起源 web的衰落:在 web 早期(1990-1993),html是一个很局限的语言.几乎完全由用于描述段落,超链接,列表和标题的结构化元素组成.随着万维网的出现(用户交互体验的加强),对 h ...

  7. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

  8. 开始编写寄几的 CSS 基础库

    前言 在现在的互联网业务中,前端开发人员往往需要支持比较多的项目数量.很多公司只有 1-2 名前端开发人员,这其中还不乏规模比较大的公司.这时前端同学就需要独挡一面支持整个公司上下的前端业务,项目如流 ...

  9. CSS基础-行快属性，hover

    CSS基础 1.行快属性 在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性.     块标签         div,ul,li,ol,h1~h6,p         可 ...

随机推荐

  1. T4模板试水篇1_入门

    T4模板作为VS自带的一套代码生成器,功能有多强大我也不知道,最近查找了一些资料学习一下,做个笔记 更详细的资料参见: MSDN: http://msdn.microsoft.com/zh-cn/li ...

  2. 内存管理pbuf.h头文件源码解析——LwIP学习

    声明:个人所写所有博客均为自己在学习中的记录与感想,或为在学习中总结他人学习成果,但因本人才疏学浅,如果大家在阅读过程中发现错误,欢迎大家指正. LwIP的内核(core文件夹)文件中pbuf.c是包 ...

  3. mysql 使用set names 解决乱码问题的原理

    解决乱码的方法,我们经常使用“set names utf8”,那么为什么加上这句代码就可以解决了呢?下面跟着我一起来深入set names utf8的内部执行原理 先说MySQL的字符集问题.Wind ...

  4. Android中对手机文件进行读写

    参考张泽华视频 (一)读写手机内存卡中的文件 对手机中的文件进行读写操作,或者新增一个文件时,可直接使用openFileOutput  /  openFileInput 得到文件的输出.输入流. Fi ...

  5. css 背景图片拉伸[转]

    http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-bac ...

  6. Android SqLite升级

    android开发中,如果大家使用到了sqlite就会牵涉到它的升级问题,因为升级后的表结构可能完全不一样,会有字段的添加或者删除等..    sqlite升级思路:      1:将表A重新命名:例 ...

  7. 有意思的GacUI

    所有方法,无论是你写还是工具来codegen还是用宏,最终都指向把这些名字和对应的指针存在一个map里.C++是不提供这个功能的,我也没仔细研究过qt怎么做,不过我在我自己的gacui里面实现了类似的 ...

  8. Qt之Windows资源文件（.rc文件）

    简述 在Windows下使用Qt时,通常会用到Windows的资源文件 - 为exe设置信息,其中包括:文件说明.产品名称.产品版本.版权等信息... 由于是Windows平台相关的东西,Qt助手中对 ...

  9. jdk8预览

    原文:http://www.techempower.com/blog/2013/03/26/everything-about-java-8/ 1.接口增强 (1)接口可以定义static方法 java ...

  10. 2014.8.4我出的模拟赛【NTR酋长】

    NTR酋长 (ntr.pas/.c/.cpp) 黄巨大终于如愿以偿的进入了czy的后宫中……但是czy很生气……他要在黄巨大走到他面前的必经之路上放上几个NTR酋长来阻挡黄巨大. 众所周知,NTR酋长 ...