Question

div+css布局的问题，float一直出问题 求高手指导一下。

蓝色div区域怎么排列啊，宽度都一样，高度不一样 而且高度是可以随意增加的。我把他们全部float:left;结果蓝5就会跑到第二行的右边，6、7、8会出现在第三行，如果高度都一样的话才会正常，可是相同的高度不是我想要的结果啊。求高手指点一下。
哎。超出文字最大字数。这代码怎么沾上来啊。

Answer 1

给你一个思路：1和5形成一个div, 2和6形成一个div ， 3和7形成一个div ， 4和 8形成一个div，
并且这4个div都给予 float:left属性，这种参差不齐的效果，起码在代码上你要弄得整齐一点。

如果像你那样，12345678都是一个div当然做不到了，你那样形成的做法是：所有div都可以形成float, 1和6也能向左靠齐。2和8 也可以向左靠齐、这样是不合格的

Answer 2

简单的FLOAT达不到效果的，这个布局类似于pinterest砖块瀑布流，你可以使用masonry.js，很简单。
配合infinit scroll 实现无限滚动的瀑布流布局。

追问

我上网查了一下masonry.js，找到http://www.163css.com/hihilinxuan/log/634636908260054804.html。这个网址可是我没有学过不会啊，能帮我修改一下我的代码吗？给我一下邮箱，我发给你。

追答

http://masonry.desandro.com/

这是masonry.js的官方地址

很简单

HTML结构
<div id="container">
  <div class="item">...</div>
  <div class="item w2">...</div>
  <div class="item">...</div>
  ...
</div>

//js代码
var container = document.querySelector('#container'); 
var msnry = new Masonry( container, {
  // options
  columnWidth: 200, //注意这个宽度是元素的总宽度，包括padding和margin和width，也可以不写
  itemSelector: '.item'
});

Answer 3

代码不给出来，怎么帮你处理呢？

追问

代码太多了，所以我花了个简单的div布局图。能布局成这样而且可以循环增加蓝色DIV就行。

追答

你复制粘贴过来不就行了

追问

好的。我把它精简一下。要不太长了。。。。

Answer 4

代码截图 传上来