<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta charset="utf-8" />
<style type="text/css">

.eblock{ position: absolute;width:200px;min-height:300px; border:1px solid #F00;}

</style>
<script src="http://r.ytrss.com/rs/js/yintaih5/h5js/lib/jquery.js"></script>
<script type="text/javascript">

$(function() {

var current;

var rowfirst;
var rowsecond;
var rowthrid;
var rowfourth;
var index = 1;
$(".eblock").each(function() {

current = $(this);

// 获取首行元素
if (index <= 4) {
if (index % 4 == 1) {
rowfirst = $(this);
} else if (index % 4 == 2) {
rowsecond = $(this);
} else if (index % 4 == 3) {
rowthrid = $(this);
} else if (index % 4 == 0) {
rowfourth = $(this);
}
}

if (index > 4) {
if (index % 4 == 1) {

current.css("top", rowfirst.position().top + rowfirst.height() + 10 + "px");
current.css("left", rowfirst.position().left + "px");

rowfirst = $(this);
} else if (index % 4 == 2) {

current.css("top", rowsecond.position().top + rowsecond.height() + 10 + "px");
current.css("left", rowsecond.position().left + "px");

rowsecond = $(this);
} else if (index % 4 == 3) {

current.css("top", rowthrid.position().top + rowthrid.height() + 10 + "px");
current.css("left", rowthrid.position().left + "px");
rowthrid = $(this);
} else if (index % 4 == 0) {

current.css("top", rowfourth.position().top + rowfourth.height() + 10 + "px");
current.css("left", rowfourth.position().left + "px");

rowfourth = $(this);
}

}
index++;

});
});

//$(function() {
// $(".eblock").each(function() {
// alert($(this).css("height"));});

//});
</script>
</head>
<body style="margin: 0 auto; margin:0">

<div style="border:1px solid #F00; top: 200px; left: 240px;" class="eblock">fdgxcv

</div>
<div style=" border:1px solid #F00; top: 200px; left: 500px;" class="eblock"> xcvxcvxv
</div>
<div style=" border:1px solid #F00; top: 200px; left: 760px;" class="eblock"> xcvxcvxv
</div>
<div style=" border:1px solid #F00; top: 200px; left: 1020px;" class="eblock"> xcvxcvxv

</div>

<div class="eblock">

</div>
<div class="eblock"> 22
</div>
<div class="eblock">23
</div>
<div class="eblock"> 24

</div>

<div class="eblock"> 31
</div>
<div class="eblock"> 32

</div>
<div class="eblock"> xcvxcvxv
</div>
<div class="eblock"> xcvxcvxv

</div>

</body>
</html>

【js】 流式布局 页面的更多相关文章

  1. 流式布局&固定宽度&响应式&rem

    我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...

  2. webapp，liveapp： 流式布局和rem布局

    liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...

  3. 微信小程序电商实战-商品列表流式布局

    今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~ 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分 ...

  4. Web前端_流式布局（百分比布局）

    移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使 ...

  5. 用 jQuery Masonry 插件创建瀑布流式的页面(转)

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  6. 用 jQuery Masonry 插件创建瀑布流式的页面

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  7. Python12/11--盒子的显隐/布局/z-index/流式布局思想

    1.盒子的显隐 display:none      在页面中不占位,采用定位布局后,显示隐藏都不会影响其他标签,不需要用动画处理时,一般用这个 opacoity : 0        在页面中占位,采 ...

  8. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  9. 移动web中的流式布局和viewport知识介绍

    1   流式布局 其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 这样的布局方式  就是移动web开发使用的常用布局方式 ...

随机推荐

  1. JAVA中的deflate压缩实现

    在文件的传输过程中,为了使大文件能够更加方便快速的传输,一般采用压缩的办法来对文件压缩后再传输,JAVA中的java.util.zip包中的Deflater和Inflater类为使用者提供了DEFLA ...

  2. Spring Data Jpa 详解 （配置篇）

    前言: JPA全称Java Persistence API,即Java持久化API,它为Java开发人员提供了一种对象/关系映射工具来管理Java应用中的关系数据,结合其他ORM的使用,能达到简化开发 ...

  3. js 实现angylar.js view层和model层双绑定（改变view刷新 model，改变model自动刷新view）

    近段时间研究了下angular.js 觉得它内部实现的view和model层之间存在很微妙的关系,如下图 如上图说的,view的改变会update 数据层model, 数据层会update视图层vie ...

  4. jQuery 显示加载更多(节流) 实现预加载

    (function () { var showMoreNChildren = function ($children, n) { //显示某jquery元素下的前n个隐藏的子元素 var $hidde ...

  5. Javascript常见操作

    图片预加载 var image = new Image();image.onload = onLoad;image.onerror = onLoad;image.src =src; image.com ...

  6. （转）Android之自定义适配器

    ListView作为一个实际开发中使用率非常高的视图,一般的系统自带的适配器都无法满足开发中的需求,这时候就需要开发人员来自定义适配器使得ListView能够有一个不错的显示效果. 有这样一个Demo ...

  7. jQuer中 height scrollTop

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...

  8. MVC 开启gzip压缩

    using System.IO; using System.IO.Compression; using System.Web; using System.Web.Mvc; public class C ...

  9. iOS 数据模型 的 一般设计

  10. 对象-关系Metadata映射模式

    MetaData Mapping元数据映射 在MetaData中保存object-relation映射的详细信息. 以表格形式定义映射,并可由通用代码来处理映射. 运行机制 MetaData中的信息如 ...