<!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. JQ笔记

    参数形式$("input:text",document.forms[0])选择form[0]所有input=text$("<p>123</p>&q ...

  2. javascript函数的声明和调用

    × 目录 [1]函数的声明方式 [2]函数的调用方式 [3]两种声明方式的区别 函数:将完成某一特定功能的代码集合起来,可以重复使用的代码块. ---------------------------- ...

  3. django 学习-13 Django文件上传

    1..vim blog/views.py from django  import  formsfrom django.http  import HttpResponse  1   2 from dja ...

  4. 纪念大一的日子，一个简单的C++

    //Author:xtyang //记得大一学C语言,永远都不明白如何调用一个函数,真是好可爱呀. #include<iostream> using namespace std; //定义 ...

  5. Oracle 联合主键

    alter table NCJSYD add constraints NCJSYD_pk primary key (YR,DQ);

  6. SpringMvc入门二----HelloWorld

    1. 导入需要的架包: 2. 配置web.xml,添加Servlet <servlet> <servlet-name>springmvc</servlet-name> ...

  7. Mybatis-Generator插件自动生成Dao、Model、Mapping相关文件

    最近做项目,mapping 有点多而且容易写错,于是试着用了Mybatis-Generator 插件自动生成 dao, domain  mapping 文件.感觉还挺好用.把相关配置分享,一边以后做项 ...

  8. android ListView_新闻案例

    xml设计 <?xml version="1.0"?> -<RelativeLayout tools:context=".MainActivity&qu ...

  9. 济南学习 Day 3 T3 am

    选数字 (select)Time Limit:3000ms Memory Limit:64MB题目描述LYK 找到了一个 n*m 的矩阵,这个矩阵上都填有一些数字,对于第 i 行第 j 列的位置上的数 ...

  10. 配置drbd高可用集群

    前期准备: 同步时间 (两个节点) 节点一(172.16.21.6) [root@stu21 heartbeat2]# ntpdate 172.16.0.1 31 Dec 20:59:25 ntpda ...