将有多少单位适合窗口，并将该值推送到一个数组 [英] How many units will fit in the window and push that value to an array
问题描述
请看看我的：
JSFiddle
我有一个数据集，我想把一个新的数值推送到数组中。
这个值是由一个累计大小小于windowSize的总和决定的。
最后，试图创建一组补偿。我想通过计算有多少数据[我] .size.updated.width将适合当前window.innerWidth，我可以知道多远去翻译一个元素。为此，一旦tempGroupSize大于WindowWidth，我需要将该偏移量推送到data [i] .pageGroup。然后移动到下一个数据[i]并重复这个过程。
如果使用lo-dash，这可能会更容易一些吗？ （我相当新手这个）
$ b $最后的数据应该是这样的：
pre> var data = [{
size：{
original：{
height：2857，
width：2000
$ bupdated：{
width：718.9359467973399，
height：1027，
isPortrait：false
}
}，
比例：0.7000350017500875，
//这是数值是窗口宽度的一个例子> 1436但小于2154（3页）
pageGroup：[1436]
}，
//这将重复为每个索引，因为数据集具有所有相同的大小
.end update
我遍历遍历页面两次，以便我可以按每个页面组大小 data [i] .pageGroup.push（tempGroupSize）;
问题：
当我休息时;似乎两个循环都停止了。
问题： 我如何得到这个循环直到 注意： 我必须返回 我更新了你的小提琴，让你知道发生了什么。我修复了一些缺少的分号，并将代码转换为日志到小提琴窗口中的 它看起来像你的数学是不是你所期望的。第一个循环通过设置 只要在SO Snippet窗口中运行这个代码，总会返回一个负数，这个代码将会总是设置 当我把它作为jsfiddle运行时，我得到了一个更大的数字，但是 检查您的算法和数学，并验证您正在尝试做什么。 Please Look at my: I have a dataset and I want to push a new value to the array. This value is determined by a sum of an accumulated size is less than the windowSize. Updated:
In the end I'm trying to create a group of offsets. I thought By calculating how many data[i].size.updated.width will fit into the current window.innerWidth, I can know how far to translate a element. To do this, Once the tempGroupSize is Greater than the WindowWidth, I need to push that offset to the data[i].pageGroup. And Then move to the next data[i] and repeat the process. This maybe easier if done with lo-dash? (i'm pretty novice with this) The final data should look something like: //this will repeat for every index because the dataset has all the same sizes
.end of update I'm iterating through ever page twice so that I can push a this size per page group Problem:
When I break; it seems that the both loops stop. Question: How would I get this loop to continue until Caveat: I must return
I updated your fiddle to give you an idea of what's happening. I fixed some missing semicolons and converted the code to log to a It looks like your math is just not what you expect. The first loop through sets the Just running this code in the SO Snippet window always returns a negative number for When I ran this as a jsfiddle, I did get a larger number, but then Check your algorithm and math, and verify what you are trying to do. **EDIT: Here's the new fiddle. I updated the
这篇关于将有多少单位适合窗口，并将该值推送到一个数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
for i 已经完成了吗？
currentBreakPage 以确保我不会遍历已经分组的页面。
< （var k = currentBreakPage; k< data.length; k ++）{$（$ i $）; pre $ b $ b //确保它不是第一次通过
if（currentBreakPage === 0）{
// console.log（'break is：'，0）;
iterator = data [i] .size.updated.width;
//console.log (iterator）;
} else {
//console.log（'break is else：'，currentBreakPage）;
iterator = data [currentBreakPage] .size.updated.width
}
//迭代器必须被减去，因为我们不想计算总窗口大小中的最新页面;
if（tempGroupSize<（windowWidth - iterator））{
tempGroupSize + = data [k] .size.updated.width;
} else {
currentBreakPage = k;
data [i] .pageGroup.push（tempGroupSize）;
break;
$ b console.log（'pageGrooup'，currentBreakPage）
}
< div> 。 http://jsfiddle.net/5v5abqzq/3/
tempGroupSize 值，但之后的每个循环都将 currentBreakPage 重置为0。 / p>
k = currentBreakPage; 这意味着 k = 0 。你的 for 循环总是设置 var k = currentBreakPage ，所以你根据你的窗口大小创建了一个无限循环。 / p>
currentBreakPage 会被卡在 1 因为这段代码总是计算为false： if（tempGroupSize<（windowWidth - iterator））{
$ b 编辑：这是新的小提琴。我更新了 tempGroupSize = 0; ： http：// jsfiddle .net / 5v5abqzq / 6 /
var logger = {log：function（text）{var _console = document.getElementById '安慰'）; _console.innerHTML = _console.innerHTML +'< br />'+ text; logger.log（'win'+ windowWidth）; var data = [{size：{original：{}}; var windowWidth = window.innerWidth; var tempGroupSize = 0，currentBreakPage = 0，iterator ='' height：2857，width：100}，updated：{width：10，height：1027，isPortrait：false}}，ratio：0.7000350017500875，pageGroup }，{size：{original：{height：2857，width：200}，updated：{width：100，height：1027，isPortrait：false}} ，比例：0.7000350017500875pageGroup：[]}，{size：{original：{height：2857，width：2000}，updated：{width height：1027，isPortrait：false}}，ratio：0.7000350017500875，pageGroup：[]}，{size：{original height：2857，width：200}，updated：{width：100，height：100，isPortrait：false}}，ratio：0.7000350017500875，pageGroup }，{size：{original：{height：2857，width：100}，updated：{width：50，height：50，isPortrait：false}} ，比例：0.7000350017500875pageGroup：[]}，{size：{original：{height：2857，width：300}，updated：{width height：200，isPortrait：false}}，ratio：0.7000350017500875，pageGroup：[]}，{size：{original：{height：2857，width }，updated：{width：100，height：1027，isPortrait：false}}，ratio：0.700035001750 0875pageGroup：[]}，{size：{original：{height：2857，width：500}，updated：{width：200，height：1027 ，isPortrait：false}}，ratio：0.7000350017500875，pageGroup：[]}]; logger.log（data.length）; for（var i = 0;我< data.length; i ++）{for（var k = currentBreakPage; k< data.length; k ++）{if（currentBreakPage === 0）{// console.log（'break is：'，0）; iterator = data [i] .size.updated.width; logger.log（迭代）; //console.log(iterator）; } else {//console.log('break is else：'，currentBreakPage）; iterator = data [currentBreakPage] .size.updated.width logger.log（'currentBreakPage：'+ currentBreakPage）; } logger.log（'tempGroupSize：'+ tempGroupSize +'，（windowWidth - iterator）：'+（windowWidth - iterator）+'，result：'+（tempGroupSize<（windowWidth - iterator）））; if（tempGroupSize<（windowWidth - iterator））{tempGroupSize + = data [k] .size.updated.width; logger.log（'设置临时组的大小为'+ tempGroupSize）; } else {currentBreakPage = k; logger.log（'currentBreakPage：'+ currentBreakPage）;数据[I] .pageGroup.push（tempGroupSize）; tempGroupSize = 0;打破; }} logger.log（'pageGroup'+ currentBreakPage）;} < div id =console>< / div> JSFiddle
var data = [{
"size": {
"original": {
"height": 2857,
"width": 2000
},
"updated": {
"width": 718.9359467973399,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
//this is value is an example of the windowwidth > 1436 but less than 2154(3 pages)
"pageGroup": [1436]
},
data[i].pageGroup.push(tempGroupSize);for i has been completed?currentBreakPage to make sure i don't iterate over pages that are already groupedfor (var i = 0; i < data.length; i++) {
for(var k = currentBreakPage; k < data.length; k++){
//makes sure it's not the first time through
if(currentBreakPage === 0){
// console.log('break is:', 0);
iterator = data[i].size.updated.width;
//console.log(iterator);
} else {
//console.log('break is else:', currentBreakPage);
iterator = data[currentBreakPage].size.updated.width
}
//iterator must be subtracted because we dont want to count the most current page in the the total window size;
if(tempGroupSize < (windowWidth - iterator)){
tempGroupSize += data[k].size.updated.width;
} else {
currentBreakPage = k;
data[i].pageGroup.push(tempGroupSize);
break;
}
}
console.log('pageGrooup', currentBreakPage)
}
<div> in the fiddle window. http://jsfiddle.net/5v5abqzq/3/tempGroupSize value, but every loop after that winds up resetting the currentBreakPage back to 0.windowWidth - iterator, so the code will always set k = currentBreakPage; which means k = 0. Your for loop always sets var k = currentBreakPage, so you are creating an endless loop depending on your window size.currentBreakPage would be stuck at 1 because of this code always evaluating to false: if(tempGroupSize < (windowWidth - iterator)){tempGroupSize = 0;: http://jsfiddle.net/5v5abqzq/6/var logger = {
log: function (text){
var _console = document.getElementById('console');
_console.innerHTML = _console.innerHTML + '<br />' + text;
}
};
var windowWidth = window.innerWidth;
var tempGroupSize = 0,
currentBreakPage = 0,
iterator = '';
logger.log('win' + windowWidth);
var data = [{
"size": {
"original": {
"height": 2857,
"width": 100
},
"updated": {
"width": 10,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 200
},
"updated": {
"width": 100,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 2000
},
"updated": {
"width": 100,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 200
},
"updated": {
"width": 100,
"height": 100,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 100
},
"updated": {
"width": 50,
"height": 50,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 300
},
"updated": {
"width": 200,
"height": 200,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 400
},
"updated": {
"width": 100,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 500
},
"updated": {
"width": 200,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}];
logger.log(data.length);
for (var i = 0; i < data.length; i++) {
for(var k = currentBreakPage; k < data.length; k++){
if(currentBreakPage === 0){
// console.log('break is:', 0);
iterator = data[i].size.updated.width;
logger.log(iterator);
//console.log(iterator);
} else {
//console.log('break is else:', currentBreakPage);
iterator = data[currentBreakPage].size.updated.width
logger.log('currentBreakPage: ' + currentBreakPage);
}
logger.log('tempGroupSize: ' + tempGroupSize + ', (windowWidth - iterator): ' + (windowWidth - iterator) + ', result: ' + (tempGroupSize < (windowWidth - iterator)) );
if(tempGroupSize < (windowWidth - iterator)){
tempGroupSize += data[k].size.updated.width;
logger.log('setting temp group size to ' + tempGroupSize);
} else {
currentBreakPage = k;
logger.log('currentBreakPage: ' + currentBreakPage);
data[i].pageGroup.push(tempGroupSize);
tempGroupSize = 0;
break;
}
}
logger.log('pageGroup' + currentBreakPage);
}
<div id="console"></div>
