第一次实例后视差滚动速度不起作用

Question

我试图制作一个重叠的图像网格，其中每个图像都有不同的滚动速度。 我的问题是它在第一个div之后停止工作。我很难过。

INDEX

<div class="news-item first-col" data-scroll-speed="2">
    <img src="<?php bloginfo( 'template_directory'); ?>/imgs/w.jpg" ;>


    </div>
    <div class="news-item second-col" data-scroll-speed=“2”>
    <img src="<?php bloginfo( 'template_directory'); ?>/imgs/hopper 1.jpg" ;>

    </div>
    <div class="news-item third-col" data-scroll-speed=“3”>
    <img src="<?php bloginfo( 'template_directory'); ?>/imgs/final_07.jpg" ;/>

    </div>
    <div class="news-item fourth-col" data-scroll-speed=“5”>
    <img src="<?php bloginfo( 'template_directory'); ?>/imgs/modernegyromace2.jpg" ;/>

    </div>

    <div class="news-item fifth-col" data-scroll-speed=“10”>
    <img src="<?php bloginfo( 'template_directory'); ?>/imgs/Geisha In Car copy-Recovered.jpg" ;/>

    </div>

    <div class="news-item sixth-col" data-scroll-speed=“3”>
    <img src="<?php bloginfo( 'template_directory'); ?>/imgs/web8.jpg" ;/>

    </div>

    <div class="news-item seventh-col" data-scroll-speed=“11”>
    <img src="<?php bloginfo( 'template_directory'); ?>/imgs/hamda_film_final_003.jpg" ;/>

    </div>

    <div class="news-item eighth-col" data-scroll-speed=“1”>
    <img src="<?php bloginfo( 'template_directory'); ?>/imgs/CNV00043.jpg" ;/>

    </div>

    <div class="news-item ninth-col" data-scroll-speed=“2”>
    <img src="<?php bloginfo( 'template_directory'); ?>/imgs/fianl_008.jpg" ;/>

    </div>

    <div class="news-item ten-col" data-scroll-speed=“4”>
    <img src="<?php bloginfo( 'template_directory'); ?>/imgs/dimensions_2015023.jpg" ;/>

    </div>

JAVASCRIPT

(function ($) {
var myBoxes = $('.news-item'); // Populate an array with our three boxes,    identified by class
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
myBoxes.each(function () {
    var $this = $(this); // Grab current box object
    var scrollspeed = parseInt($this.data('scroll-speed')), // Grab the data-scroll-speed value and parse into Integer 
        offset = -scrollTop / scrollspeed;
    // The offset gives minus value of scrollTop divided by scrollspeed
    $this.css('transform', 'translateY(' + offset + 'px)');
    // Attaches a CSS transform to translate/move the element up the Y axis by our offset value as we scroll
});
});
)(jQuery);

CSS

news-item { max-width: 200px; height: 500px; position: absolute; }

    .news-item img {
    height: 100%;
    }

    .first-col {
    left: 0px;
    top: 0px;
    }

    .second-col {
    left: 300px;
    top: 250px;
    }

    .third-col {
    top: 100px;
    left: 1000px;
    }

    .fourth-col {
    top: 600px;
    left: 50px;
    }

    .fifth-col {
    top: 900px;
    left: 300px;
    }

    .sixth-col {
    top: 1200px;
    left: 350px;
    }

    .seventh-col {
    top: 1400px;
    left: 650px;
    }