Dynamic Float top positions

Articles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function() {
 
counter = $("#container > div").size(); // count total immidiate children of container
columns = 3;
 
leftpos = 0;
var myarray = [];
var temp = [];
temp[0] =temp[1] = temp[2] =0;
j=0;
 
for(i=1;i<=counter;i++)
{
 
width = $("#div"+i).width();
 
$("#div"+i).css('left',leftpos+'px');
$("#div"+i).css('top',temp[j]+'px');
 
$("#div"+i).css('display','block');
 
leftpos = leftpos + width;
myarray[j] = $("#div"+i).height();
 
temp[j] = temp[j] + myarray[j]
 
j++;
if(i%columns==0) {leftpos =0; var myarray = []; j=0;}
 
}// end of for loop
 
});
</script>
 
<style type="text/css">
#container{ width:900px; position:relative;}
.divs { width:300px; float:left; display:none; position:absolute; border:#000 1px solid;}
</style>
 
<div id="container">
<div id="div1">
asd falksjdf alksjdf ;asdf
asdf asdfa sdlfkjal; sdfkl;aksjd f;lkasjdf ;laksjdf ;laksjdf ;laksjdf laksdjfa lskdfj a;sldkfj as
</div>
<div id="div2">t is a long established fact tha sdf at a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div id="div3">t is a long established fact that a ra sdfkahsd fadsfeader will be distracted by the readable content of a page when looking at its layout. t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div id="div4">t is a long established fact that a reader will be di asdkjfh laksjdhf aksdhf stracted by the readable content of a page when looking at its layout. t is a long established fact that a reader will be distracted by the readable content of a</div>
<div id="div5">t is a long established fact that a reader will be distracted by the readable asd asdf asdfk hasdfcontent of a page when looking at its layout. </div>
<div id="div6">t is a long established fact that a reader will be distracted by the readable content of a page whas dfasdf asdfkjh f en looking at its layout. </div>
<div id="div7">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its la asdf ads fadfyout. </div>
<div id="div8">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its la dfa fayout. </div>
<div id="div9">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layoua adsf t. </div>
<div id="div10">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layoa dfasd fasdf asd fasdf ad asdfadsf asdf ut. </div>
<div id="div11">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layou asd fasdf aksd fkjahsd fjkahsd flkjahsd ft. </div>
 
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *


+ eight = 12