ページに 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
HTML構造を変更せずにどのスクリプトまたはcssを使用すると、コンテンツを構造の下に表示するのに役立ちますか:-
1 2 7 8 13 14
3 4 9 10 ...
5 6 11 12
だれか助けてください。
このクールな jquery プラグインを試してください - http://masonry.desandro.com/index.html
サイトから: Masonry は要素を垂直に配置し、各要素をグリッド内の次の空いている場所に配置します。その結果、石工が壁に石をはめ込むように、さまざまな高さの要素間の垂直方向の隙間が最小限に抑えられます。
乾杯！
編集:このIsotope プラグインを試してください - 要素をカテゴリに基づいて行に配置します。
div を分類し、それに応じてプラグインを並べ替えることができます。上記のリンクは、クラス名に従って div を再配置します。
それを使ってすべての人に...
<!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