图片瀑布流式布局

Question

瀑布流布局图片照片墙jquery

Answer 1

我木前就是那么做的。
1.先将文件夹的图片全部读取到集合里面，然后遍历集合，将所有图片都打印到界面上，属性设为隐藏嘛。（只是打测试数据，正式界面上本来就产生了图片，不需要这步骤。）
2.在界面上用js将所有img控件给找出来组成数组。然后遍历数组，依次判断图片的长宽是否放得下，放得下就放下(在放下的时候用变量保存图片对应列的第二行是否被占用)，放不下就继续循环下一个图片。当循环出的图片把第一行放满后，再继续放第二行格子（放的时候判断过格子是否被占用，大小是否合适这些）。第一行和第二行都是用的算left 和top来定位的。
3.目前遇到的问题是。js取出来的数组 只遍历了一次，不适合的图片就相当于舍弃，不会再被遍历到。然后就造成本来给的图片足够拼出几种方案的，但现在却一种都没拼出来。
例如：我js取出来的数组里面图片格式依次是，容器宽1200 高480
1.480*240
2.480*240
3.480*240
4.480*240
5.240*240
6.240*240
7.480*480
8.480*480
然后遍历的时候，第1张 第2张 都能顺利放下，第三、第四张被遍历到时放不下，所以直接跳过了，第5张可以放下，第六张可以方向，第7 第8张又放不下了。 然后拼凑出来就这样了目前就卡壳到这了……