知乎图片浏览

zhihu-fuli.js

(function() {
  var imageUrls = [],
    totals = 0,
    offset = 0,
    qId = location.href.split('/').pop();
  $(".App-main").innerHTML = '';
  var style = " background: rgba(0,0,0,0.8); display: -webkit-flex; /* Safari */ -webkit-flex-wrap: wrap; /* Safari 6.1+ */ display: flex; flex-wrap: wrap; "
  $("body").insertAdjacentHTML('beforeend', '<div id="img-fuli" style="' + style + '"><h1 style="color:#fff;">加载中，请稍后...</h1></div>');
  loadImg();

  function loadImg() {
    if (imageUrls.length >= totals && totals != 0) {
      return;
    }
    var xhReq = new XMLHttpRequest();
    var url = 'https://www.zhihu.com/api/v4/questions/' + qId + '/answers?include=data%5B*%5D.is_normal%2Cis_collapsed%2Ccollapse_reason%2Cis_sticky%2Ccollapsed_by%2Csuggest_edit%2Ccomment_count%2Ccan_comment%2Ccontent%2Ceditable_content%2Cvoteup_count%2Creshipment_settings%2Ccomment_permission%2Cmark_infos%2Ccreated_time%2Cupdated_time%2Creview_info%2Crelationship.is_authorized%2Cis_author%2Cvoting%2Cis_thanked%2Cis_nothelp%2Cupvoted_followees%3Bdata%5B*%5D.author.follower_count%2Cbadge%5B%3F(type%3Dbest_answerer)%5D.topics&offset=' + offset + '&limit=20&sort_by=default';
    xhReq.open("GET", url, false);
    xhReq.send(null);
    var serverResponse = xhReq.responseText;
    var response = JSON.parse(serverResponse);
    var data = response.data

    totals = response.paging.totals

    var length = data.length;
    var i = 0;
    for (i = 0; i < length; i++) {
      var string = data[i].content;
      imageUrls = imageUrls.concat(parseContent(string));
    }
    offset += 20;
    showImg();
  }

  function parseContent(string) {
    var re = new RegExp('data-actualsrc="([a-zA-z]+://[^\s^>]*)"', 'g');
    var matches = string.match(re) || [];
    var result = [];
    var i,
      len;
    for (i = 0, len = matches.length; i < len; i++) {
      var match = matches[i];
      result[i] = match.replace(re, "$1");
    }
    return result;
  }
  function showImg() {
    var length = imageUrls.length;
    var img = '';
    for (var i = 0; i < length; i++) {
      var style = ' position="relative"; display="inline-block"; width="33%"; height="33%"'
      img += '<img src="' + imageUrls[i] + '"style="' + style + '">';
    }
    $("#img-fuli").innerHTML = img;
  }
  window.loadImg = loadImg;
})()

window.$ = $;
window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    loadImg();
  }
};