Question

div（或）li显示div并排最多3个div每个div具有动态高度并动态调整div。 adjust divs dynamically

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
*{margin: 0px auto;}
ul{ width: 80%;  position: relative; }
ul li{list-style: none; width: 30%; height: auto; border: 1px solid blue; position:absolute; }
</style>


<ul id = "ulh" class="newblog-container" >
<li style="left:0%;">
    <img src="http://placehold.it/200x120&text=image1">
</li>
<li style="left:33.33%;">
  <img src="http://placehold.it/200x300&text=image2">
</li>
<li style="left:66.66%;">
  <img src="http://placehold.it/200x220&text=image3">
</li>
<li style="left:0%;">
  <img src="http://placehold.it/200x320&text=image4">
</li>
<li style="left:33.33%;">
  <img src="http://placehold.it/200x220&text=image5">
</li>
<li style="left:66.66%;">
  <img src="http://placehold.it/200x520&text=image6">
</li>
<li style="left:0%;">
  <img src="http://placehold.it/200x320&text=image7">
</li>
<li style="left:33.33%;">
  <img src="http://placehold.it/200x350&text=image8">
</li>
<li style="left:66.66%;">
  <img src="http://placehold.it/200x520&text=image9">
</li>
</ul>


<script type="text/javascript">    
jQuery(window).load(function() { 
for (var i = 0; i < jQuery( ".newblog-container li" ).length; i++) 
{
   if(i > 2 & i < 6){ jQuery( ".newblog-container li" ).eq(i).css({'top' : jQuery( ".newblog-container li" ).eq(i-3).outerHeight() +'px'}); }
   if(i >= 6){ var p = jQuery( ".newblog-container li" ).eq(i-3); var position = p.position();
    jQuery( ".newblog-container li" ).eq(i).css({'top' : position.top + jQuery( ".newblog-container li" ).eq(i-3).outerHeight() +'px'}); }
};
var p2 = jQuery( ".newblog-container li" ).last(); var position2 = p2.position(); var lip = position2.top;  
var llih3 = jQuery( ".newblog-container li" ).eq(-3).height();
var llih2 = jQuery( ".newblog-container li" ).eq(-2).height();
var llih1 = jQuery( ".newblog-container li" ).eq(-1).height();
var numbers_array = [llih3, llih2, llih1];
var biggest = Math.max.apply( null, numbers_array );
var z = lip + biggest + 'px';
 jQuery('.newblog-container').css({'height' : lip + biggest + 'px'});

});
</script>

＆＃13;

Answer 2

您可以使用js将'position'设置为'absolute'
您可以更改js中的'cols'以更改列数

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #main {
      position:relative;
    }
    .box {
      width: 300px;
      margin-top: 20px;
      margin-left: 10px;
      float:left;
      border: 1px solid #ccc;
    }
    .box p{
      width: 300px;
      margin: 10px  auto;
      border-radius:5px;
    }
  </style>
</head>
<body>
  <div id="main">
    <div class="box">
      <p>1 convallis timestamp</p>
    </div>
    <div class="box">
      <p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
    </div>
    <div class="box">
      <p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula
			faucibus suscipit. Suspendisse rutrum turpis quis nunc
			convallis quis aliquam mauris suscipit.Nullam eget lectus augue. Donec eu sem sit amet ligula
			faucibus suscipit. Suspendisse rutrum turpis quis nunc
			convallis quis aliquam mauris suscipit.Nullam eget lectus augue. Donec eu sem sit amet ligula
			faucibus suscipit. Suspendisse rutrum turpis quis nunc
			convallis quis aliquam mauris suscipit.</p>
    </div>
    <div class="box">
      <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut
	sagittis vitae, egestas at augue. </p>
    </div>
    <div class="box">
      <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
    </div>
    <div class="box">
      <p> 6 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
    </div>
    <div class="box">
      <p> 7 Donec a ermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
    </div>
    <div class="box">
      <p> 8 Donec a ermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
    </div>
    <div class="box">
      <p> 9 Donec a ermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
    </div>

  </div>
</body>

<script>
window.onload=function(){
  waterfall("main","box");
};
function waterfall(parent,box){
  var oParent=document.getElementById(parent);
  var oBoxs=getByClass(oParent,box); // 'box' List
  //Calculate the number of columns displayed across the page (page width, box width)
  var oBoxW=312; // width of box
  var cols=3; // number of columns
  // set the width of 'main'
  oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto";
  var hArr=[];
  for(var i=0;i<oBoxs.length;i++){
    if(i<cols){
      hArr.push(oBoxs[i].offsetHeight);
    } else {
      oBoxs[i].style.position="absolute";
      oBoxs[i].style.top=hArr[i%cols] + 10*Math.floor(i/cols) +"px";
      oBoxs[i].style.left=oBoxW*(i%cols)+"px";
      hArr[i%cols]=hArr[i%cols] + oBoxs[i].offsetHeight;
    }
  }
}
//Get the element based on it's class
function getByClass(parent,clsName){
  var boxArr=new Array();
  var oElements=parent.getElementsByTagName("*");
  for(var i=0;i<oElements.length;i++){
    if(oElements[i].className==clsName){
      boxArr.push(oElements[i]);
    }
  }
  return boxArr;
}

</script>
</html>

显示div并排到n个div，每个div都有动态高度

2 个答案: