zoukankan      html  css  js  c++  java
  • 【js】 流式布局 页面


    <!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;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>

  • 相关阅读:
    分享8个超棒的免费高质量图标搜索引擎
    分享25个几何元素在网页设计中的应用案例
    推荐16个国外的源码下载网站
    分享20佳好玩的 jQuery 游戏
    快手基于 Flink 的持续优化与实践
    我的2007
    安装GPhone SDK
    asp.net如何取得纯客户端控件的值
    1111
    .NET与java的MVC模式(2):struts2核心工作流程与原理
  • 原文地址:https://www.cnblogs.com/viewcozy/p/4628545.html
Copyright © 2011-2022 走看看