使用CSS定位瀑布流简单的实现代码-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

使用CSS定位瀑布流简单的实现代码

Mar 16, 2017 am 10:27 AM

kedudukan css

这篇文章介绍使用CSS定位瀑布流简单的实现代码

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;
&lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;
&lt;title&gt;简单CSS定位瀑布流实现方法&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
/* 
 * @name: 
 * @time: 2016-12-07
 * @author: wht
*/
body , html {
    height: 100%;
}
/* basic */
body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; }
body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; }
ul { list-style:none; overflow:hidden; }
img { border:none; }
 
/* content */
.content {margin:10px auto; }
 
/* case-list */
.case-list { margin:0 auto; }
.case-list li { display:block; position:absolute;padding:5px 0; border:1px solid #ddd;border-radius:5px; background-color:#fff;}
.case-list li img { display:block;border-radius:5px;margin-left:5px; }
&lt;/style&gt;
&lt;/head&gt;
 
&lt;body&gt;
 
&lt;!-- content --&gt;
&lt;div class=&quot;content&quot; id=&quot;content&quot;&gt;
    &lt;ul class=&quot;case-list&quot; id=&quot;case-list&quot;&gt;
        &lt;li&gt;&lt;img src=&quot;1.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;2.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;3.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;4.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;5.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;5.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;7.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;8.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;9.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;10.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;11.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;12.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;13.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;14.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;15.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;16.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;17.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;18.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;19.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;20.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.8.3.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
window.onload = function(){
 
    var windowW=$(window).width();
    //console.log(windowW);
    var imgW=$(&quot;#case-list li&gt;img&quot;).width();
    var hNum=parseInt(windowW/imgW);
    var cases = $(&quot;#case-list li&quot;);
    var case_h = new Array();
       
    for(var j=0;j&lt;hNum;j++){             
        case_h[j] = new Array();
    }
  
 
      $.each(cases, function(i){
           
        var hNum=parseInt(windowW/imgW); 
        var m = i%hNum;
 
        case_h[m].push(cases.eq(i).height());
        var step = Math.floor(i/hNum);  
        cases.eq(i).css(&quot;left&quot;, (imgW + 10)*m+&quot;px&quot;);
    //    console.log(step);
        if(!step){
            cases.eq(i).css(&quot;top&quot;, &quot;0&quot;);
        }else{        
            var num = 0;
            for(var n = 0; n&lt;step;n++){            
                num += case_h[m][n] + 20;
            }    
            cases.eq(i).css(&quot;top&quot;, num+&quot;px&quot;); 
             
        }
    });
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Atas ialah kandungan terperinci 使用CSS定位瀑布流简单的实现代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn