<!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. 关于VIM在Win10下的无意义折腾

    这两天和VIM较上劲了,总结下来其实是极无意义的折腾,浪费了很多宝贵的时间! 事情是这样的,无意中发现vim在Win10的控制台窗口无参数打开时不显示那个“乌干达儿童”的界面(其实就是:intro的内 ...

  2. 日期类型的input元素设置默认值为当天

    html文件:<input name="" type="date" value="" id="datePicker" ...

  3. jQuery选择器之表单选择器Demo

    测试代码: 09-表单选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  4. weimi 短信API post方式的简易代码。

    http://www.weimi.cc/example-csharp.html string mobile = "<enter your mobiles>", con ...

  5. ASP.NET中后台注册js脚本攻略（转）

    用Page.ClientScript.RegisterClientScriptBlock 和Page.ClientScript.RegisterStartupScript:区别:   1.使用Page ...

  6. C#调用SSIS包及读取DataReader目标

    C#调用SSIS包需要引用两个DLL .(具体位置在C盘搜索,MSDN和百度提供的路径都不太正确) Microsoft.SQLServer.ManagedDTS.dll Microsoft.SqlSe ...

  7. SQL Server2000安装

    本篇文章介绍了安装SQL Server 2000各版本的软硬件配置要求,企业版安装过程的详细步骤,以及需要注意的事项.其他版本可以参考安装 注意:Windows XP不能装企业版.win2000\wi ...

  8. js 获取url 参数

    $(function () { var WeixinCode = GetQueryString("WeixinCode"); $("#ProXQ").attr( ...

  9. 在调用“Fill”前，SelectCommand 属性尚未初始化

    在调用“Fill”前,SelectCommand 属性尚未初始化 是因为少写了一行代码: private readonly string strConnection = System.Configur ...

  10. Shell指令

    Shell指令 1.Shell原理图 2.Shell指令的基本语法 Shell指令 Shell –选项 参数 Shell –选项 Shell参数 3.常用的Shell指令 1)ls指令:显示文件信息 ...