Figure div



  • My brain is freezing. I get the size of div'a. $('.template').height() And I'm doing it. (temph) / 150(150 is the size of the picture).But the size of the picture is 50 percent and it can change its size.

    How do I get the size of the first picture? and template Share pictures.

    It should be about: (temph) / imgsize Even if the picture changes the size

    $(window).load(function() {
     var temph = $('.template').height();
     var res = (temph) / 150;
     var result = res.toFixed();
    var theImages = ["http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg","http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg","http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg"];
    

    for (var i = 1; i <= result; i++) {

    var item = theImages[Math.floor(Math.random()*theImages.length)];
    $('.template').append('<img src='+item+'><br>').hide().fadeIn(800);

    }
    });

    </script>";

    .template
    {
    background-color:green;
    width:100%;
    height:1000px;
    }
    .template img
    {
    width:50%;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="template"></div>



  • The size of the image can be obtained after download, with the event onload, and the height of the element only after implementation

    template = $('.template');
    

    images = [
    "http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg",
    "http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg",
    "http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg"
    ];

    (function put(v) {
    item = images[Math.floor(Math.random()*images.length)];

    image(new Image());

    function image(img) {
    img.src = item;
    img.onload = function() {
    template.append(img, '<br>');
    v += img.offsetHeight;
    console.log(template.height(), v);
    if(template.height() > v) { put(v); } else { img.remove(); }
    }
    }
    })(0);

    .template {
    background-color: green;
    width: 100%;
    height: 1000px;
    }

    .template img { width: 50%; }

    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <div class="template"></div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2