使用jQuery实现瀑布式布局

uery相信各位都上过淘宝等之类的网站...参差不齐的网站布局是不是眼熟..比如这样的

 

 

像这种的一般我们的做法是

 

  .item

        {
            width: 200px;
            float: left;
            padding:15px 15px 0;
            background-color:white;
            border: 1px solid #ccc;

        }

 

html代码

 

 1 <div id="container">
 2 <div class="item">
 3             <1><img src="image/1.jpg" /><br />
 4             hello!world!3条ADSL，无论是几M的，上传带宽是固定的，
 5         </div>
 6         <div class="item">
 7             <img src="image/4.jpg" /><br />
 8             <5> hello!world!是固定的，大约60~70K，3条乘3</div>
 9         <div class="item">
10             <img src="image/9.jpg" /><br />
11             <6> hello!world!</div>
12         <div class="item">
13             <img src="image/5.jpg" /><br />
14             <7> hello!world!hello!world!3条ADSL，无论是几M的，上传带宽是固定的，大约60~70K，3条乘3，就是大约180-210K，现在13个人，除以13，每个人是13.8~16.15K，现在因为机器上没有准确的流量监控，我再家的时候试过，只开QQ和一个酷狗或者酷我之类的在线音乐播放，大概就是20K左右上传。。。现在就属于咱们上传数据过大，结果开网页的时候请求数据包发不出去，就打不开网页。</div>
15         <div class="item">
16             <img src="image/6.jpg" /><br />
17             <8> hello!world!</div></div>

 

这样做显然是不够的..因为他的布局不会这么错落有致... 
这时候我们就要用到一个新的插件jquery.isotope.min.js或jquery.masonry.min.js 这两个js都会起到这种效果,当然这需要依附jq插件

 把插件插入到我们的网页中 接下来只需要做一下操作就ok咯...

 

 1   <script type="text/javascript">
 2         $(function () {
 3 
 4             var $container = $('#container');
 5           /*这个适用于有图片的操作*/
 6             $container.imagesLoaded(function () {
 7                 $(this).isotope({
 8                     itemSelector: '.item'
 9                 });
10             });
11  
12  
13           /*以下是点击div 此div删除*/
14             $container.delegate('.item', 'click', function () {
15                 $container.isotope('remove', $(this)).isotope('reloadItems').isotope();
16             });
17 
18         });
19  
20     </script>
21  
22  /*一下是无图片的操作.单纯的文字需要别的方法*/
23    <script type="text/javascript">
24  $(document).ready(function () {
25                     var $container = $('#container');
26                    $container.isotope({
27                        itemSelector: '.item'/
28                    });
29 </script>  

 1   <script type="text/javascript">
 2         $(function () {
 3 
 4             var $container = $('#container');
 5           /*这个适用于有图片的操作*/
 6             $container.imagesLoaded(function () {
 7                 $(this).isotope({
 8                     itemSelector: '.item'
 9                 });
10             });
11  
12  
13           /*以下是点击div 此div删除*/
14             $container.delegate('.item', 'click', function () {
15                 $container.isotope('remove', $(this)).isotope('reloadItems').isotope();
16             });
17 
18         });
19  
20     </script>
21  
22  /*一下是无图片的操作.单纯的文字需要别的方法*/
23    <script type="text/javascript">
24  $(document).ready(function () {
25                     var $container = $('#container');
26                    $container.isotope({
27                        itemSelector: '.item'/
28                    });
29

 

 

 这就完成我想要的效果了..很好的一点是ie6也完全兼容...

具体代码++插件+示例下载 /Files/dugou/isotope-site.zip  /Files/dugou/masonry-site.zip