divを並んで表示n個のdiv、動的な高さを持つすべてのdiv

-3

div（または）div divを並べて表示するdivごとにダイナミックな高さを持つdivを3 divまで表示し、divを動的に調整します。 adjust divs dynamically divを並んで表示n個のdiv、動的な高さを持つすべてのdiv

出典

2017-07-16 nagendrakodi

https://masonry.desandro.com/ –

こんにちは、StackOverflowのを歓迎します。ヘルプページ、特に[ここではどのトピックについて聞かせていただけますか？]（http://stackoverflow.com/help/on-topic）と[質問しないでください。」]（http://stackoverflow.com/help/dont-ask）。さらに重要なことは、[Stack Overflow question checklist]（http://meta.stackexchange.com/q/156810/204922）をお読みください。また、[最小、完全、および検証可能な例]（http://stackoverflow.com/help/mcve）についても知りたいことがあります。 – herrbischoff

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

出典

2017-07-17 12:34:45 nagendrakodi

結果を全面表示する – nagendrakodi

あなたは '絶対' と '位置' を設定するJSを使用することができます
あなたは列数を変更するには、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 
 
\t \t \t faucibus suscipit. Suspendisse rutrum turpis quis nunc 
 
\t \t \t convallis quis aliquam mauris suscipit.Nullam eget lectus augue. Donec eu sem sit amet ligula 
 
\t \t \t faucibus suscipit. Suspendisse rutrum turpis quis nunc 
 
\t \t \t convallis quis aliquam mauris suscipit.Nullam eget lectus augue. Donec eu sem sit amet ligula 
 
\t \t \t faucibus suscipit. Suspendisse rutrum turpis quis nunc 
 
\t \t \t convallis quis aliquam mauris suscipit.</p> 
 
    </div> 
 
    <div class="box"> 
 
     <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut 
 
\t 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>

出典

2017-07-16 17:09:28 taryn

コードを説明してください:) –

https://i.stack.imgur.com/KVcMr.png 縦に表示する必要があります。画像を更新しました – nagendrakodi

divを並んで表示n個のdiv、動的な高さを持つすべてのdiv

答えて

関連する問題