Question

在我构建的这个框架中，JavaScript将div块输出到屏幕并使用＆＃34; rowTracker＆＃34;为了确保在屏幕切断后将下一个div放到下一行。

我想采取的下一步是跟踪每个div的大小，并在屏幕宽度调整后重新排列div。它目前在刷新页面后重新排列。

＆＃13;

width = 200;    
height = 200;
gutter = 20;

rowTracker = new Array();
heightTracker = new Array();
widthTracker = new Array();

pageWidth = 0;


$(document).ready(function(){

    pageWidth = $(document).width();    // Assign pageWidth to document page width

    counter = 0;    // Sets first counter
    counter2 = 0;   // Sets second counter
    $("section.neo__content div").each(function(index,element){ // Loops or iterates for each div
        if(((counter + 1) * (width+gutter)) < pageWidth){   // If width + gutter of div is less than width of page
            $(this).css({"top":(1 * ( (rowTracker[counter]?rowTracker[counter]:0) + gutter)),"left":(counter * (width+gutter))});   // Places div into proper position depending on page width and 20px gutter
            rowTracker[counter] = ( (rowTracker[counter]?rowTracker[counter]:0) + $(this).height() + gutter);   // Row tracker, array of counter 
            heightTracker[counter] = ($(this).height());    // Gets height of div   
            widthTracker[counter] = ($(this).width());  // Gets width of div
            counter++;  // Increment counter for each div
        }else{  // If not, run this
            console.log(rowTracker);    // Outputs heights of each row to console 
            console.log(heightTracker);
            console.log(widthTracker);
            counter = 0;    // Reset counter
            counter2++; // Second counter iterates throughout loop
            $(this).css({"top":(1 * ((rowTracker[counter]?rowTracker[counter]:0) + gutter)),"left":(counter * (width+gutter))});
            rowTracker[counter] = ( (rowTracker[counter]?rowTracker[counter]:0) + $(this).height() + gutter);
            counter++;
        }
    });

});

＆＃13;

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  border: 0;
  border: none;
  color: #333;
  font-size: 1.2em;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  font-size: 62.5%;
}
section.neo__content {
  margin: 0 20px 20px 0;
  width: auto;
  height: auto;
}
section.neo__content div {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #f00;
  margin: 20px 0 20px 20px;
}
section.neo__content div:nth-child(3),
section.neo__content div:nth-child(12) {
  height: 350px;
}
header,
footer {
  position: fixed;
  z-index: 1000;
  width: 100%;
  background: #ccc;
}
header {
  height: 100px;
  top: 0;
}
footer {
  height: 30px;
  bottom: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <section class="neo__content  js_content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
  </section>
</body>

＆＃13;

跟踪单个Div的大小，使其流畅

0 个答案: