使用jQuery实现瀑布式布局

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

}

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>

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