<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DEMO5</title> <meta charset="utf-8" /> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> <div id="container" style="border:1px solid red;padding:10px;text-align:center;display:flex;"></div> <script type="text/javascript"> $(function () { //初始化测试项 var screenWidth = 600; //容器宽度 var itemColumn = 5; //列数量 var itemWidth = parseInt((screenWidth - 20) / itemColumn); //每列的宽度 $('#container').css("width", screenWidth); //设置容器宽度 //初始化测试数据 var objs = InitTestData(); //处理 var itemOjbArr = InitItemArr(itemColumn); $.each(objs, function (index, obj) { var minIndex = FindMinLengthIndex(itemOjbArr); itemOjbArr[minIndex].items.push(obj); itemOjbArr[minIndex].itemHeight += parseInt(obj.height); }); //展示 $.each(itemOjbArr, function (index, obj) { $('#container').append(RenderHtml(obj.items, itemWidth)); }); }); //找出最小高度的索引 function FindMinLengthIndex(itemArr) { var index = itemArr.length - 1; var height = itemArr[index].itemHeight; for (i = index; i >= 0; i--) { var item = itemArr[i]; if (item.itemHeight <= height) { index = i; height = item.itemHeight; } } return index; } //初始化Item数组 function InitItemArr(length) { var arr = []; for (i = 0; i < length; i++) { arr.push({ itemHeight: 0, items:[] }); } return arr; } //初始化测试数据 function InitTestData() { var objs = []; for (var i = 1; i <= 15; i++) { objs.push({ 289, height: RandomWidth(200, 400), text: i }); } return objs; } //获取指定区间的随机数 function RandomWidth(n, m) { var random = Math.floor(Math.random() * (m - n + 1) + n); return random; } //处理html function RenderHtml(itemArr, imageWidth) { var itemHtml = '<div style="flex:1">'; $.each(itemArr, function (index, arr) { var imageHeight = parseInt(arr.height * (imageWidth / arr.width)); var _tempHtml = ''; _tempHtml += '<div>'; _tempHtml += '<image src="1.jpg" width="' + imageWidth + '" height="' + imageHeight + '" /><br/>'; _tempHtml += arr.text; _tempHtml += '</div>'; itemHtml += _tempHtml; }); itemHtml += '</div>'; return itemHtml; } </script> </body> </html>