LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Click me for new layout!
CSS
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #fff;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
}

body {
  overflow-x: hidden;
}

#boxes {
  position: relative;
}

#container {
  margin: 0 auto;
  height: 100%;
  width: auto;
  max-width: 98%;
  margin-top: 250px;
}

.box {
  background: grey;
  border: 3px solid #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 15px;
  position: absolute;
  padding: 2%;
  font-weight: bold;
  font-size: 2em;
}

.box:hover, .top:hover, .top2:hover {
  opacity: 0.5;
  cursor: pointer;
}

.top, .top2 {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 3em;
  font-family: arial;
  padding: 30px 0;
  background: grey;
}

.testbox {
  display: none;
  background: red;
  position: absolute;
  z-index: -1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#testbox {
  visibility: hidden;
  height: 0;
  position: relative;
  margin-top: -250px;
}

/*Auto Sizing Boxes*/
/*@for $i from 1 through 6 {
  $w1: percentage(1/($i+1));
  $w2: percentage(2/($i+1));
  $w3: percentage(3/($i+1));
  $ti: 1;

  @if $w2 > 100% { $w2: 100%; }
  @if $w3 > 100% { $w3: 100%; }
  @if $i == 1{ $ti: 0 }
  @if $i == 6{
    @media all and (min-width: $i*$b_SIZE+1){
      .a1x1, .a1x2{ width:$w1; }
      .a2x3, .a2x1, .a2x2{ width:$w2; }
      .a3x3, .a3x2{ width:$w3; }
      .box{border:$b_SIZE/(100-$i*10) solid $border;}
    }
  } @else {
    @media all and (min-width: ($i*$b_SIZE+1)*$ti) and (max-width: $b_SIZE*($i+1)){
      .a1x1, .a1x2{ width:$w1; }
      .a2x3, .a2x1, .a2x2{ width:$w2; }
      .a3x3, .a3x2{ width:$w3; }
      .box{border:$b_SIZE/(100-$i*10) solid $border;}
    }
  }
}*/
JS
var dbg = 0; //debugging

var boxarrs = [],
    grid = [],
    colors = ["hotpink","red","orange","yellow","green","blue","skyblue","purple","pink","brown","charcoal"];

var _Y=_CUR=0,
    cols = 2,
    _LOAD = 10,
    resize,
    _SIZE,
    needsupdate = true;

var colorness = 0;

$(window).resize(function() {
  clearTimeout(resize);
  doresize();
});

$('.top').click(function(){
  _CUR++;
  trimgrid(_CUR-3);
  randomboxes();
})

$(document).ready(function(){ 
  updatecols();
  randomboxes();
  doresize(); 

  for(var i=0; i<2; i++){
    _CUR++;
    needsupdate = true;
    randomboxes();
    doresize();
  }
})

var gloop;
$(window).scroll(function () {
  clearTimeout(gloop);
  
  gloop = setTimeout(function(){	
    if($(document).height() - _SIZE*4 <= $(window).scrollTop() + $(window).height()) {
      _CUR++;
      trimgrid(_CUR-3);
      randomboxes();
    }
  },200)
})

//set box size relative to width of a 1x1 box
function resizeboxes(){
  _SIZE = $('#container').width() / cols;
  $('.box').css("border-width", _SIZE/50);
  //Two colums change for 3x3 or 3x2 boxes
  var width3 = cols<3 ? cols*_SIZE : _SIZE*3;

  $('.a1x1').outerHeight(_SIZE);
  $('.a1x1').outerWidth(_SIZE);
  
  $('.a2x2').outerHeight(_SIZE*2);
  $('.a2x2').outerWidth(_SIZE*2);
  
  $('.a3x3').outerHeight(_SIZE*3);
  $('.a3x3').outerWidth(width3);

  $('.a1x2').outerHeight(_SIZE*2);
  $('.a1x2').outerWidth(_SIZE);
  $('.a2x1').outerHeight(_SIZE);
  $('.a2x1').outerWidth(_SIZE*2);

  $('.a2x3').outerHeight(_SIZE*3);
  $('.a2x3').outerWidth(_SIZE*2);
  $('.a3x2').outerHeight(_SIZE*2);
  $('.a3x2').outerWidth(width3);
}

//Create and change positions of boxes
//Does this for all boxes on the page
function doresize(){
  //reduce lag on drag resize. Commit on .5s afterwards
  resize = setTimeout(function(){	

    _SIZE = $('#container').width() / cols;

    //Reset the boxes.
    updatecols();
    if(needsupdate){
      grid=[];
      _Y=0;
      addnewcolumn();
      $('#boxes').html("");
      
      var i=_CUR-2;
      if(i<0) i=0;
      var first = true;
      do{ 
        setupboxes(i, first); 
        i++;
        first = false;
      } while(i<_CUR+1);
      
      needsupdate = false;
    }
    resetpos();
    resizeboxes();
    
  },500);
}

//when browser resizes (e.g. phone orientation) 
//will reset positions of all boxes
function resetpos(){
  for(var j=0; j', {
      class: 'cur'+boxarrs[index][i].cur+' box a'+boxarrs[index][i].w +"x"+ boxarrs[index][i].h,
      style: 'background: '+boxarrs[index][i].color,
    })
    boxarrs[index][i].div = curbox;
    placebox(boxarrs[index][i],index,first);
    curbox.appendTo('#boxes');
  }
  resizeboxes()
}

function updatecols(){
  var measure = 250, oldcols = cols; cols = 7;
  for(var i=7; i>1; i--) if($('#container').width() - 10 < measure*i) cols = i; else break;
  if(oldcols != cols) needsupdate = true;
}

//add new row in grid[]
function addnewcolumn(){ _Y++; for(var i=0; i=0; i--){
    if( boxes[i].w == 1 /*&& boxes[i].h == 1*/ ){
      var temp = boxes[i];
      boxes.splice(i,1);
      temparr.push(temp);
    } }
  //add to end
  temparr.sort(function(a,b){ return(a.h > b.h) ? -1 : ((b.h > a.h) ? 1 : 0); });
  temparr.sort();
  for(var i=0;i lasty) lasty = boxarrs[ind][i].y }
      for(var i=0; i<_LOAD; i++){ if(boxarrs[ind][i].x > lastx && boxarrs[ind][i].y == lasty) lastx = boxarrs[ind][i].x }
      return counterFromGrid(lastx, lasty);
    }
    
    var tempgrid = [];
    var counter = 0;
    
    if(!isfirst && index>0){
      counter = getlastbox(index-1);
      if(counter<0 || counter==null) counter = 0;
    } 

    while(counter cols ? cols : box.w;
        if(bx==1 || by==1) topleft = false;

        loop:
        for(var by=0; by= cols || grid[curcoord].occ == true){
              tempgrid = [];
              break loop;
            }

            tempgrid.push(temp);
          } } //end loops
      }//end if occupied

      //if full shape fits, return needed values
      if(tempgrid.length == box.h * b_WIDTH) return tempgrid;
      counter++;

    } return false;
  } //end nextfree()

  //Put the box in and place!
  var newbox = nextfree();
  if(newbox != false){
    for(var i=0; i

Description

Making me own 'box-filling' gallery from scratch. 200+ lines of code o.O
Term
Wed, 12/27/2017 - 07:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv