<!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. uva 12549 最大流

    思路:这题的原型题是比较经典的网络流.原型题模型就是把所有的障碍去掉. 有障碍做法还是一样的,只用将每个列和行重新划分,求最大流就行了. #include <cstring> #inclu ...

  2. GAN

    GAN(Generative Adversarial Nets),产生式对抗网络 存在问题: 1.无法表示数据分布 2.速度 3.resolution太小,大了无语义信息 4.无reference 5 ...

  3. java实现Composite(组合)模式

    组合模式涉及的是一组对象,其中一些对象可能含有其他对象,这些对象也可以含有对象,因此,有些对象代表的是对象群组. Composite模式的设计意图在于:让所有的用户能够用统一的接口处理单个对象以及对象 ...

  4. html有序列表和无序列表

    css控制UL LI 的样式详解(推荐) CSS: 代码如下: #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} 代码如 ...

  5. 如何让R代码按计划执行

    应用场景:你编写了R代码,每天对提交的数据进行分析,你希望它你吃饭的时候执行完毕,生成图表. 那么你需要安装taskscheduleR的包. 怎么操作,看帮助呗.

  6. GForms开发平台

    1. 开发平台概述 1.1. 产品概述 GForms开发平台让开发人员甚至非技术人员在短短几分钟内创建全功能的展现服务,让开发团队更加适应客户和市场的需求,从而提高客户服务和速度实现收益. GForm ...

  7. Linux下动态共享库加载及使用详解【转】

    原文地址:http://blog.chinaunix.net/uid-29025972-id-3855500.html 对动态库的实际应用还不太熟悉的读者可能曾经遇到过类似“error while l ...

  8. MySQL Limit order by

    今天写模糊查询的时候,按照时间排序并进行分页时,在mybatis的映射文件中有这样一条sql语句 SELECT <include refid="Base_Column_List&quo ...

  9. Windows 命令大全

    打开控制面板的方法:输入control,回车即可打开. 以下是“运行”里常见的命令: gpedit.msc-----组策略 sndrec32-------录音机 Nslookup-------IP地址 ...

  10. 阿里巴巴2013年实习生笔试题A

    一.单项选择题 1.下列说法不正确的是:(B) A.SATA硬盘的速度速度大约为500Mbps/s B.读取18XDVD光盘数据的速度为1Gbps C.前兆以太网的数据读取速度为1Gpbs D.读取D ...