Question

我在页面上有20个div，看起来像是并排的。我想通过更改jquery Mansory代码来移动这些div（在实时页面上）。例如：

<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div>

我已编码上面的内容以下面的方式显示内容（在css-float的帮助下）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

什么脚本或CSS不改变HTML结构将帮助我在下面的结构中显示内容： -

1 2 7 8 13 14
3 4 9 10 ...
5 6 11 12
任何人都可以帮助我。

Answer 1

试试这个很酷的jquery插件 - http://masonry.desandro.com/index.html

从现场：砌体垂直排列元素，将每个元素定位在网格中的下一个开放点。结果最大限度地减少了不同高度的元素之间的垂直间隙，就像在墙上安装石头的石匠一样。

干杯！

编辑：尝试this同位素插件 - 根据类别将元素排列成行。

您可以对div进行分类，然后让插件进行相应的排序。上面的链接根据类名重新排列div。

Answer 2

用它来做所有......

<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
    <html>
       <head>
          <style>
          .Text{
            font-family: Verdana,Arial,Sans-serif,'Times New Roman';
            font-size: 9pt;
            font-weight: normal;
            font-style: normal;
            color: #666;
            text-decoration: none;
          }

          .alertsBoxTitle{
            font-family: Verdana,Arial,Sans-serif,'Times New Roman';
            font-size: 9pt;
            font-weight: bold;
            font-style: normal;
            color: #ffffff;
            text-decoration: none;
          }
          .alertsBox{
            background: #ECF1F9;
            border: 1px #a1bcdf solid;
          }
          body{
           overflow:hidden;
          }
          </style>

          <script language="javascript">
          // browser detection
          var agt=navigator.userAgent.toLowerCase();
          var is_major = parseInt(navigator.appVersion);
          var is_minor = parseFloat(navigator.appVersion);

          var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                      && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                      && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
          var is_nav4 = (is_nav && (is_major == 4));
          var is_nav6 = (is_nav && (is_major == 5));
          var is_nav6up = (is_nav && (is_major >= 5));
          var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

          var dragapproved=false
          var z,x,y
          var maxleft,maxtop,maxright,maxbottom;

          function setdragBounds()
          {
              // you can set the bounds of the draggable area here
              maxleft = 10;
              maxtop = 10;
              maxright = document.body.clientWidth - 10;
              maxbottom = document.body.clientHeight - 100;
          }

          function move(e)
          {
               var tmpXpos = (!is_ie)? temp1+e.clientX-x: temp1+event.clientX-x;
               var tmpYpos = (!is_ie)? temp2+e.clientY-y : temp2+event.clientY-y;
               if (dragapproved)
               {
                  z.style.left = tmpXpos;
                  z.style.top = tmpYpos;

                  if (tmpXpos < maxleft)
                      z.style.left = maxleft;

                  if (tmpXpos > maxright)
                      z.style.left = maxright;

                  if (tmpYpos < maxtop)
                      z.style.top = maxtop;
                  if (tmpYpos > maxbottom)
                      z.style.top = maxbottom;

                  return false
               }
          }

          function drags(e)
          {
                 if (!(is_ie)&&!(!is_ie)) return

                 var firedobj=(!is_ie)? e.target : event.srcElement
                 var topelement=(!is_ie)? "HTML" : "BODY"

                 while (firedobj.tagName!=topelement && firedobj.className!="drag" && firedobj.tagName!='SELECT' && firedobj.tagName!='TEXTAREA' && firedobj.tagName!='INPUT' && firedobj.tagName!='IMG')
                 {
                     // here you can add the elements that cannot be used for drag . using their class name or id or tag names
                     firedobj=(!is_ie)? firedobj.parentNode : firedobj.parentElement
                 }

                 if (firedobj.className=="drag")
                 {
                     dragapproved = true
                     z = firedobj
                     var tmpheight = z.style.height.split("px")
                     maxbottom = (tmpheight[0])?document.body.clientHeight - tmpheight[0]:document.body.clientHeight - 20;

                     temp1 = parseInt(z.style.left+0)
                     temp2 = parseInt(z.style.top+0)
                     x = (!is_ie)? e.clientX: event.clientX
                     y = (!is_ie)? e.clientY: event.clientY
                     document.onmousemove = move

                     return false
                 }
          }

          document.onmousedown=drags
          document.onmouseup=new Function("dragapproved=false")
       </script>
    </head>

    <body>
      <div id="Dialog" style="width:316px;height:119px;max-width:316px;position:relative;top:50px;left:140px; z-index:1000;" class="drag">
        <table width="100%" style="width:315px;height:119px" cellspacing="0" cellpadding="0" class="alertsBox" id="dialog_table">
          <tr style="cursor:move">
            <td class="alertsBoxTitle notselectable" colspan="2" align="left" height="21" style="cursor:move;background-color:#32426F">Drag Me</td>
          </tr>
          <tr>
            <td align="center" colspan="2" height="5"> </td>
          </tr>
          <tr>
            <td align="center" colspan="2">
              <table width="97%"  border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                  <td valign='top' align="center">
                    </td>
                </tr>
                <tr>
                  <td valign='top' colspan="2" class="Text">this div can be placed any where</td>
                </tr>
                <tr>
                  <td valign='top' colspan="2" align="center"><br/><input type="button" value="Ok"/></td>
                </tr>
              </table></td>
          </tr>
        </table>
      </div>
    </body>
</html>

http://mukhesh.mywapblog.com/category/java-script-27/1.xhtml

改变div位置

2 个答案: