调整大小时的动态Flex项目

Question

New web developer here, building a calendar if possible with pure JS only.

As of now: https://jsfiddle.net/q7h3fm9c/ , I'm only aware of wrapping elements on overflow, how do I 'destroy' and 'create' new nodes in a responsive fashion so that there is only 1 row with the optimum amount of nodes? Heres the bit where nodes are created manually:

for(var i = 0; i < 4; i++) addNewDayObject(i, "lel", "lel", 2015)

I've came across media query in my attempts at googling a solution, however I would very much prefer not to hard code the width values to trigger code as the flex-items will have dynamic widths.

Answer 1

If just 'hiding' the consecutive rows is what you need, you can set the height element of the container div to only show one row. This should work as long as the height is fixed.

Please see my fiddle here .

CSS

#dayObjContainer {
    max-height: 124px; /* max height here*/
    overflow: hidden;
    padding-bottom: 5px;
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
}
.dayObj {
    padding: 10px 0px;
    width: 250px;
    color: #FFF5AA;
    background-color: #D4C96A;
    text-align: center;
    margin: 0px 5px 5px; /* added bottom margin here */
    box-shadow: 2px 2px 5px #888888;
}

Answer 2

I discovered window.onresize and everything is solved. Does javascript + browser have documentation that lists all the methods and properties at my disposal? Guesswork and google is making learning abit slow for me :\\

window.onload = init;
var dayObjTemplate;
var containerRef;
var objCount = 0;
function init() {
  dayObjTemplate = document.getElementById("obj0");
  containerRef = dayObjTemplate.parentNode;
  dayObjTemplate.parentNode.removeChild(dayObjTemplate);
  // capture day object template and remove from DOM

  for(var i = 0; i < 1; i++) addNewDayObject(11, 8, 2015)

  window.onresize = function updateNewContainerWidth(argument) {
    var conWdt = containerRef.offsetWidth;
    while(objCount < Math.floor(conWdt / (250+5))) {
      addNewDayObject(11, 8, 2015);
    }
    while(objCount > 1 && objCount > Math.floor(conWdt/(250+5))) {
      removeLastDayObject();
    }
  }
}

function removeLastDayObject() {
  containerRef.removeChild(document.getElementById("obj"+objCount));
  objCount--;
}

function addNewDayObject(day, month, year) {
  var d = new Date(year, month, day);
  var dayNames=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

  objCount++;
  var clone = dayObjTemplate.cloneNode(true);
  clone.id = "obj" + objCount;
  clone.getElementsByClassName("dayObjDayLabel")[0].innerHTML = dayNames[d.getDay() - 1];
  clone.getElementsByClassName("dayObjNumLabel")[0].innerHTML = day;
  clone.getElementsByClassName("dayObjMYLabel")[0].innerHTML = month + ", " + year

  document.getElementById("dayObjContainer").appendChild(clone);
}

excuse my messy code, but those who face the same problem as me, hope this helps.